/* ============================================================
   BAUMANN_GARAGE
   Paleta: dílna po setmění — sazová čerň, kost, krev
   Písmo:  Anton (plakát) + Barlow Condensed (štítky)
           + Barlow (text) + IBM Plex Mono (data)

   Značka žije na černé, tak na ní žije i web. Tma je vedená ve
   třech hloubkách, aby stránka nebyla plochá díra: asfalt je
   běžná sekce, čerň (.dark) je úvod a závěr, plech je jediný
   světlejší panel (rentgen) — bez něj by šedé auto zmizelo.
   Barvy jsou vedené sémanticky (--bg, --fg, --rule …) —
   komponenty se obarví samy a nic se nikde nedubluje.
   ============================================================ */

:root{
  /* ── paleta ──────────────────────────────────────────── */
  --void:      #050505;   /* nejhlubší tma — úvod, rezervace, patička */
  --asphalt:   #0D0C0B;   /* běžný podklad stránky */
  --graphite:  #171614;   /* povrch panelů a karet */
  --steel:     #201E1C;   /* plech — světlejší panel */

  --bone:      #E9E1D2;   /* hlavní text — krémová odečtená z loga */
  --bone-2:    #F8F2E6;   /* nejvyšší světlo */
  --ash:       #8F877A;   /* sekundární text */
  --ash-2:     #6B655A;   /* poznámky a placeholdery */

  --signal:    #C8161D;   /* krev — jediný akcent */
  --signal-h:  #E8232B;   /* táž krev pod světlem (hover, svit) */
  --signal-d:  #7A0D12;   /* zaschlá — stíny a cákance */

  /* chromový přeliv na velké typografii — viz .h2 a .foot__word */
  --chrome-1:  #FBFAF7;
  --chrome-2:  #A6A29A;
  --chrome-3:  #E6E3DC;

  /* ── sémantické tokeny (běžná sekce) ─────────────────── */
  --bg:       var(--asphalt);
  --surface:  var(--graphite);
  --fg:       var(--bone);
  --fg-mute:  var(--ash);
  --rule:     #242120;
  --rule-2:   #38342F;
  --on-signal:#FFF6F4;

  /* ── typografie ──────────────────────────────────────── */
  /* Anton nese plakátové nadpisy, Barlow Condensed mezipatro
     (štítky, navigace, názvy položek), Barlow běžný text
     a Plex Mono všechno, co je údaj — kódy, ceny, časy.     */
  /* Anton má čárky a háčky vysoko — víceřádkový nadpis potřebuje
     řádkování aspoň 1.1, jinak háček z druhého řádku sedne na
     čárku prvního. Pod tuhle hodnotu nechoďte.                */
  --display: "Anton", "Arial Narrow", "Helvetica Neue", sans-serif;
  --cond:    "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --text:    "Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --fs-hero: clamp(2.9rem, min(10.8vw, 13.4vh), 11rem);  /* i na nízkém okně se hero vejde do jedné obrazovky */
  --fs-h2:   clamp(2.5rem, 7.2vw, 6.2rem);
  --fs-h3:   clamp(1.2rem, 2vw, 1.62rem);
  --fs-lede: clamp(1.05rem, 1.4vw, 1.32rem);
  --fs-body: clamp(1rem, 1.08vw, 1.08rem);
  --fs-mono: clamp(0.66rem, 0.78vw, 0.75rem);

  /* rozměry */
  --wrap: 1440px;
  --pad: clamp(1.25rem, 4.5vw, 5rem);
  --sect: clamp(5.5rem, 12vh, 11rem);
  --nav-h: 74px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-io: cubic-bezier(.65,0,.35,1);
}

/* nejhlubší tma — úvod, rezervace, kontakt, patička */
.dark{
  --bg:      var(--void);
  --surface: #100F0E;
  --fg:      var(--bone-2);
  --fg-mute: #857F74;
  --rule:    #1D1B1A;
  --rule-2:  #2E2B28;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0;
  background:var(--void);
  color:var(--bone);
  font-family:var(--text);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden; }

/* Zrno přes celou stránku. Značka je tištěná na tričko, ne
   vyrenderovaná — bez téhle vrstvy jsou plochy podezřele čisté.
   Leží nad obsahem, ale pod navigací (110) i menu (105).       */
body::after{
  content:""; position:fixed; inset:0; z-index:90; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.55'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion:reduce){ body::after{ display:none; } }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,p,figure,blockquote,dl,dd{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:3px; border-radius:0; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{
  position:fixed; top:10px; left:10px; z-index:200; padding:.6rem 1rem;
  background:var(--signal); color:var(--on-signal); font-family:var(--mono); font-size:.75rem;
  transform:translateY(-160%); transition:transform .2s;
}
.skip:focus{ transform:none; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }
.section{ padding-block:var(--sect); background:var(--bg); color:var(--fg); }
.mono{ font-family:var(--mono); font-weight:500; letter-spacing:.02em; }

.scrollbar{ position:fixed; inset:0 0 auto 0; height:2px; z-index:120; pointer-events:none; }
.scrollbar__fill{ display:block; height:100%; width:0; background:var(--signal); }

/* křížky v rozích modulu — značí hranu mřížky, ne dekorace */
.marks{ position:relative; }
.marks::before,.marks::after{
  content:"+"; position:absolute; left:-.42em; font-family:var(--mono); font-size:1rem;
  line-height:1; color:var(--signal-h); pointer-events:none;
}
.marks::before{ top:-.5em; }
.marks::after{ bottom:-.5em; }
.marks>.mark-r{ position:absolute; right:-.42em; font-family:var(--mono); font-size:1rem; line-height:1; color:var(--signal-h); }
.marks>.mark-r:first-of-type{ top:-.5em; }
.marks>.mark-r:last-of-type{ bottom:-.5em; }

/* ── společná typografie ───────────────────────────────── */
/* nadpis je plakát: Anton, verzálky, chromový přeliv jako na
   plechové ceduli. Bez podpory background-clip zůstane kost. */
.h2{
  font-family:var(--display); font-weight:400; color:var(--fg);
  font-size:var(--fs-h2); line-height:1.1; letter-spacing:.004em; text-transform:uppercase;
  margin-bottom:1.4rem; text-wrap:balance;
}
@supports (-webkit-background-clip:text){
  .h2{
    /* přeliv se opakuje po řádcích (1.1em = řádkování), takže každý
       řádek dostane vlastní kov — jinak poslední vyjde plochý */
    background-image:linear-gradient(177deg, var(--chrome-1) 4%, var(--chrome-3) 30%, var(--chrome-2) 66%, var(--chrome-3) 100%);
    background-size:100% 1.1em; background-repeat:repeat;
    -webkit-background-clip:text; background-clip:text; color:transparent;
  }
}
.lede{ font-size:var(--fs-lede); line-height:1.55; color:var(--fg-mute); max-width:46ch; }

/* ── tlačítka ──────────────────────────────────────────── */
/* primární je dělené: štítek + samostatný blok se šipkou */
.btn{
  display:inline-flex; align-items:stretch; gap:2px; background:none; border:0; padding:0;
  font-family:var(--cond); font-size:.95rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; cursor:pointer;
}
/* spodní hrana v zaschlé krvi — tlačítko pak vypadá vyražené
   do plechu, ne položené na něm; pod kurzorem zmizí */
.btn>span{
  display:flex; align-items:center; padding:1.05rem 1.9rem;
  background:var(--signal); color:var(--on-signal);
  box-shadow:inset 0 -3px 0 var(--signal-d);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn>i{
  display:grid; place-items:center; width:3.4rem; font-style:normal; font-size:1rem;
  background:var(--signal); color:var(--on-signal);
  box-shadow:inset 0 -3px 0 var(--signal-d);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover>span,.btn:hover>i,
.btn:focus-visible>span,.btn:focus-visible>i{ box-shadow:none; }
.btn>i svg{ width:16px; transition:transform .35s var(--ease); }
.btn:hover>span,.btn:hover>i,
.btn:focus-visible>span,.btn:focus-visible>i{ background:var(--bone); color:var(--void); }
.btn:hover>i svg{ transform:translateX(3px); }

.btn--ghost{ gap:0; }
.btn--ghost>span{
  background:none; color:var(--fg); border:1px solid var(--rule-2);
  transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--ghost:hover>span,.btn--ghost:focus-visible>span{ background:var(--fg); color:var(--bg); border-color:var(--fg); }
.btn--sm>span{ padding:.72rem 1.15rem; font-size:.84rem; }
.btn--sm>i{ width:2.4rem; font-size:.85rem; }

/* ── vrata (úvodní roleta) ─────────────────────────────── */
/* Celý běh drží CSS, aby se otevřela i bez JS. Skript jen odemkne
   rolování, nastartuje úvod hero sekce a po dojetí uklidí uzel.

   0,00 – 0,45  prolnutí ze tmy          2,82 – 3,37  kryt vyjede
   0,22 – 1,28  logo naskládá po dílech  2,86 – 3,26  lišty zmizí
   1,20 – 1,66  logo zmizí               3,40         konec
   1,50 – 3,00  vrata vyjedou nahoru     */
.shutter{
  /* průhledné — tmu na začátku dělá .shutter__fade, jinak by byla stránka
     za vraty neviditelná i po jejich vyjetí */
  position:fixed; inset:0; z-index:300; overflow:hidden;
  animation:vrataPryc .01s linear 3.4s forwards;    /* pojistka, kdyby JS neuklidil */
}

/* ── plech ─────────────────────────────────────────────── */
.shutter__lift{
  position:absolute; inset:0; will-change:transform;
  animation:vrata 1.5s linear 1.5s forwards;
}
.shutter__panel{
  position:absolute; inset:0;
  --slat:clamp(21px, 3.1vh, 38px);
  background-color:#37373B;
  background-image:
    /* stín od překladu nahoře */
    linear-gradient(180deg, rgba(0,0,0,.64) 0, rgba(0,0,0,0) 12%),
    /* vinětace — světlo nedopadá rovnoměrně */
    radial-gradient(128% 96% at 50% 38%, rgba(0,0,0,0) 22%, rgba(0,0,0,.36) 64%, rgba(0,0,0,.74) 100%),
    /* měkké nasvícení zleva shora */
    radial-gradient(58% 46% at 33% 24%, rgba(255,255,255,.115), rgba(255,255,255,0) 72%),
    /* profil lamely: tvrdý spoj nahoře, úzký odlesk pod ním,
       dlouhý plochý dojezd a ztmavení do dalšího spoje */
    repeating-linear-gradient(180deg,
      rgba(0,0,0,.80)        0,
      rgba(0,0,0,.64)        calc(var(--slat) * .022),
      rgba(0,0,0,.21)        calc(var(--slat) * .062),
      rgba(255,255,255,.15)  calc(var(--slat) * .125),
      rgba(255,255,255,.055) calc(var(--slat) * .205),
      rgba(255,255,255,.004) calc(var(--slat) * .34),
      rgba(0,0,0,.045)       calc(var(--slat) * .56),
      rgba(0,0,0,.115)       calc(var(--slat) * .76),
      rgba(0,0,0,.30)        calc(var(--slat) * .90),
      rgba(0,0,0,.57)        calc(var(--slat) * .965),
      rgba(0,0,0,.80)        var(--slat)),
    /* studený nádech — holá šeď je na plech moc mrtvá */
    linear-gradient(0deg, rgba(10,13,20,.20) 0, rgba(10,13,20,.20) 100%);
  box-shadow:0 42px 90px rgba(0,0,0,.62), 0 10px 26px rgba(0,0,0,.5);
  display:grid; place-items:center;
  transform-origin:50% 100%;                       /* kamera se přisouvá, spodní hrana drží */
  animation:dech 3.35s linear both;
}

/* nános špíny a svislé stopy po dešti — bez nich je nátěr moc čistý */
.shutter__wear{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:.2; mix-blend-mode:multiply;
  background-repeat:repeat-x, repeat;
  background-size:640px 100%, 760px 600px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='s' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05 .0035' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 .3 .1 0 -.2'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23s)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.011' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 .3 .1 0 -.26'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)'/%3E%3C/svg%3E");
}

/* spáry mezi lamelami vedou i přes logo — plech je nad barvou.
   Při rozjezdu ztratí kontrast, jako by se rozmazaly pohybem. */
.shutter__seams{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.6;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.66) 0 1.5px,
    rgba(255,255,255,.12) 1.5px 3px,
    transparent 3px var(--slat));
  animation:spary 1.5s linear 1.5s forwards;
}
/* pomalý odlesk přejíždějící po plechu */
.shutter__sheen{
  position:absolute; inset:-25% -45%; z-index:4; pointer-events:none;
  background:linear-gradient(101deg,
    rgba(255,255,255,0) 36%, rgba(255,255,255,.05) 46%,
    rgba(255,255,255,.10) 50%, rgba(255,255,255,.05) 54%, rgba(255,255,255,0) 64%);
  animation:lesk 3.2s cubic-bezier(.36,0,.5,1) .1s both;
}

/* ── logo ──────────────────────────────────────────────── */
/* Kresba je složená přesně na --void, takže na černé sekci nemá
   viditelnou hranu a nepotřebuje průhlednost ani blend-mode.
   Na červených vratech z ní hrana dělá ceduli — a to je záměr. */
.logo-mark,.shutter__logo{ display:block; height:auto; }

/* ── logo namalované na plechu ─────────────────────────── */
.shutter__mark{
  position:relative; z-index:1; display:grid; justify-items:center; gap:clamp(.9rem,2.2vh,1.6rem);
  color:var(--bone-2); text-align:center; padding-inline:var(--pad);
  animation:znackaOut .46s cubic-bezier(.55,0,.75,.2) 1.2s forwards;
}
/* Značka je na vratech nastříkaná přes šablonu, ne pověšená.
   Soubor nese jen alfu (rozmazané okraje, přestřik, kropenatost),
   barvu dodá maska z CSS — nástřik se tak drží barvy loga a leží
   POD spárami lamel, takže spáry vedou přes něj jako přes nátěr. */
.shutter__logo{
  width:clamp(260px, min(66vw, 54vh), 560px); aspect-ratio:780/743;
  background-color:var(--bone);
  -webkit-mask:url("assets/img/logo-baumann-spray.webp") center/contain no-repeat;
          mask:url("assets/img/logo-baumann-spray.webp") center/contain no-repeat;
  opacity:.88;                       /* nános není krycí, plech pod ním prosvítá */
  animation:nastrikIn .9s cubic-bezier(.2,.72,.2,1) .3s both;
}
.shutter__sub{
  font-size:var(--fs-mono); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.6);
  animation:dilIn .8s cubic-bezier(.2,.72,.2,1) .48s both;
}

/* ── spodní dosedací lišta a světlo z pod ní ───────────── */
.shutter__rail{
  position:absolute; left:0; right:0; bottom:0; z-index:5; height:clamp(10px,1.4vh,18px);
  background:linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,.72));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 2px 0 rgba(255,255,255,.10);
}
.shutter__rail::after{                              /* světlo vytékající pod vraty */
  content:""; position:absolute; left:-6%; right:-6%; top:100%;
  height:clamp(46px,8vh,120px); opacity:0;
  background:linear-gradient(180deg, rgba(255,236,222,.26), rgba(255,236,222,0) 72%);
  animation:svetlo 1.5s ease-out 1.5s forwards;
}

/* ── boční vodicí lišty — roleta v nich jede ───────────── */
.shutter__frame{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  animation:ramZmiz .4s var(--ease) 2.86s forwards;
}
.shutter__frame::before,.shutter__frame::after{
  content:""; position:absolute; top:0; bottom:0; width:clamp(14px,1.7vw,30px);
}
.shutter__frame::before{
  left:0; background:linear-gradient(90deg,#0A0807 0,#241C19 34%,#171210 68%,#070505 100%);
  box-shadow:7px 0 22px rgba(0,0,0,.55);
}
.shutter__frame::after{
  right:0; background:linear-gradient(270deg,#0A0807 0,#241C19 34%,#171210 68%,#070505 100%);
  box-shadow:-7px 0 22px rgba(0,0,0,.55);
}

/* ── kryt navíjecího hřídele — vrata do něj mizí ───────── */
.shutter__head{
  position:absolute; top:0; left:0; right:0; z-index:6; height:clamp(44px,6.6vh,84px);
  background:linear-gradient(180deg,#14100F 0%,#241814 44%,#0E0B0A 100%);
  box-shadow:0 16px 34px rgba(0,0,0,.6);
  animation:kryt .55s cubic-bezier(.5,0,.2,1) 2.82s forwards;
}
.shutter__head::before{          /* lamely tmavnou, jak se stáčejí do krytu */
  content:""; position:absolute; left:0; right:0; top:100%; pointer-events:none;
  height:clamp(28px,3.6vh,50px);
  background:linear-gradient(180deg, rgba(0,0,0,.8) 0, rgba(0,0,0,.36) 42%, rgba(0,0,0,0) 100%);
}
.shutter__head::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.18) 28%, rgba(255,255,255,.18) 72%, transparent);
}

/* ── filmové zrno a prolnutí ze tmy ────────────────────── */
.shutter__grain{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay; background-size:190px 190px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='190' height='190' filter='url(%23n)'/%3E%3C/svg%3E");
}
.shutter__fade{
  position:absolute; inset:0; z-index:7; pointer-events:none; background:#0B0908;
  animation:zTmy .45s var(--ease) both;
}

@keyframes zTmy{ from{ opacity:1; } to{ opacity:0; } }
@keyframes dilIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes slovoIn{
  from{ opacity:0; transform:translateY(16px) scale(.97); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}
/* nástřik doostřuje z mlhy a zůstane nepatrně nakřivo — nikdo
   nedrží sprej podle vodováhy */
@keyframes nastrikIn{
  from{ opacity:0; transform:rotate(-1.6deg) scale(.965); filter:blur(11px); }
  to  { opacity:.88; transform:rotate(-1.6deg); filter:blur(0); }
}
@keyframes znackaOut{ to{ opacity:0; transform:translateY(-16px) scale(1.05); filter:blur(5px); } }
@keyframes dech{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
@keyframes lesk{ from{ transform:translate3d(-62%,0,0); } to{ transform:translate3d(62%,0,0); } }
@keyframes spary{ 0%{ opacity:.62; } 42%{ opacity:.2; } 100%{ opacity:.44; } }
@keyframes svetlo{ 0%{ opacity:0; } 22%{ opacity:1; } 100%{ opacity:0; } }
/* motor zabere, vrata cuknou dolů, pak plynule nahoru a nahoře doměkka doježdí */
@keyframes vrata{
  0%   { transform:translate3d(0,0,0);        animation-timing-function:cubic-bezier(.42,0,.58,1); }
  8%   { transform:translate3d(0,1.1%,0);     animation-timing-function:cubic-bezier(.34,0,.3,1); }
  24%  { transform:translate3d(0,-2.6%,0);    animation-timing-function:cubic-bezier(.44,0,.18,1); }
  100% { transform:translate3d(0,-101.5%,0); }
}
@keyframes ramZmiz{ to{ opacity:0; } }
@keyframes kryt{ to{ transform:translate3d(0,-101%,0); } }
@keyframes vrataPryc{ to{ visibility:hidden; } }
/* dokud jsou vrata zavřená, stránka pod nimi neroluje */
.je-zavreno,.je-zavreno body{ overflow:hidden; }

/* ── navigace ──────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:110; height:var(--nav-h);
  color:var(--bone);   /* leží nad tmavým úvodem */
  transition:background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), height .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* nahoře lišta žádný plech nemá, ale hero pod ní je pohyblivé video —
   proto jen měkký kouř: čerň, co zdola vyprchá do nuly, a lehké rozostření
   podkladu. Text tím dostane oporu, aniž by vznikl viditelný pruh.        */
.nav::before{
  content:""; position:absolute; left:0; right:0; top:0; height:calc(100% + 34px);
  pointer-events:none; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(5,5,5,.62) 0%, rgba(5,5,5,.44) 42%, rgba(5,5,5,.18) 74%, rgba(5,5,5,0) 100%);
  -webkit-backdrop-filter:blur(7px) saturate(112%);
          backdrop-filter:blur(7px) saturate(112%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.35) 78%, transparent 100%);
          mask-image:linear-gradient(to bottom, #000 0%, #000 46%, rgba(0,0,0,.35) 78%, transparent 100%);
  transition:opacity .4s var(--ease);
}
/* jakmile naskočí plech, kouř by se s ním sčítal — proto zmizí */
.nav.is-stuck::before{ opacity:0; }
/* nad videem text nadzvedne vlastní stín; na plechu už ho nepotřebuje */
.nav:not(.is-stuck) .brand__text,
.nav:not(.is-stuck) .nav__links a,
.nav:not(.is-stuck) .nav__tel{
  text-shadow:0 1px 2px rgba(0,0,0,.55), 0 2px 14px rgba(0,0,0,.45);
}
.nav:not(.is-stuck){ --nav-link-o:.82; }
/* přilepená lišta je plech se signálním podtržením, ne bílé sklo */
.nav.is-stuck{
  height:62px; color:var(--bone);
  background:rgba(7,6,6,.86); backdrop-filter:blur(14px) saturate(125%);
  border-bottom-color:#2A2724;
  box-shadow:0 1px 0 rgba(200,22,29,.42);
}
.nav__inner{
  height:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:2rem;
}
.brand{ display:flex; align-items:center; gap:.7rem; color:inherit; }
.brand__text{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:1.22rem; letter-spacing:.035em; line-height:1;
}
.brand__city{ color:var(--signal-h); }   /* podtržítko patří ke slovu, žádná mezera */
.nav__links{ display:flex; gap:clamp(1rem,2.2vw,2.4rem); }
.nav__links a{
  position:relative; font-family:var(--cond); font-size:.95rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; opacity:var(--nav-link-o,.7); padding-block:.3rem; transition:opacity .25s, color .25s;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--signal);
  transform:scaleX(0); transform-origin:right; transition:transform .38s var(--ease-io);
}
.nav__links a:hover,.nav__links a[aria-current]{ opacity:1; }
.nav__links a:hover::after,.nav__links a[aria-current]::after{ transform:scaleX(1); transform-origin:left; }
.nav__end{ display:flex; align-items:center; gap:1rem; }
.nav__tel{ font-family:var(--mono); font-size:.8rem; letter-spacing:.06em; }
.nav__tel:hover{ color:var(--signal-h); }

.burger{ position:relative; display:none; width:42px; height:42px; border:1px solid currentColor; background:none; cursor:pointer; padding:0; opacity:.65; }
.burger span{
  position:absolute; left:50%; top:50%; width:16px; height:1.5px; background:currentColor;
  transition:transform .3s var(--ease);
}
.burger span:first-child{ transform:translate(-50%,-50%) translateY(-3px); }
.burger span:last-child{ transform:translate(-50%,-50%) translateY(3px); }
.burger[aria-expanded="true"] span:first-child{ transform:translate(-50%,-50%) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child{ transform:translate(-50%,-50%) rotate(-45deg); }

.menu{
  position:fixed; inset:0; z-index:105; background:var(--void); color:var(--bone-2);
  display:flex; flex-direction:column; justify-content:center; gap:3rem;
  padding:calc(var(--nav-h) + 2rem) var(--pad) 2rem;
}
.menu[hidden]{ display:none; }
.menu__list{ display:flex; flex-direction:column; }
.menu__list a{
  display:flex; align-items:baseline; gap:1rem; padding:.5rem 0; border-bottom:1px solid #221F1D;
  font-size:clamp(2rem,9.6vw,3.4rem); line-height:1.12; text-transform:uppercase;
  font-family:var(--display); font-weight:400; letter-spacing:.02em;
  opacity:0; transform:translateY(18px); animation:menuIn .5s var(--ease) forwards;
}
.menu__list a em{ font-size:.72rem; color:var(--signal-h); font-style:normal; font-family:var(--mono); }
.menu__list a:nth-child(1){animation-delay:.04s}.menu__list a:nth-child(2){animation-delay:.08s}
.menu__list a:nth-child(3){animation-delay:.12s}.menu__list a:nth-child(4){animation-delay:.16s}
.menu__list a:nth-child(5){animation-delay:.2s}.menu__list a:nth-child(6){animation-delay:.24s}
@keyframes menuIn{ to{ opacity:1; transform:none; } }
.menu__foot{ display:flex; flex-direction:column; gap:.4rem; font-size:.8rem; color:var(--ash); }
.menu__foot a{ color:var(--signal-h); }

/* ── HERO (tmavá dílna, rolováním se rozedná) ──────────── */
/* .hero je jen dráha rolování, obraz drží přišpendlené .hero__stage.
   Dokud JS nepřidá .is-scrub, je hero běžná sekce na výšku okna
   a texty jsou vidět — bez JS ani bez videa se tedy nic neztratí. */
.hero{
  --hero-drah:330svh;
  position:relative; background:var(--void); color:var(--bone-2);
}
.hero__stage{
  position:relative; min-height:100svh; overflow:hidden;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--nav-h) + 1.6rem) 0 0;
}
.hero.is-scrub{ height:var(--hero-drah); }
.hero.is-scrub .hero__stage{ position:sticky; top:0; height:100svh; min-height:0; }

.hero__media{ position:absolute; inset:0; z-index:0; }
.hero__scene{
  position:absolute; inset:0;
  background:
    radial-gradient(115% 85% at 50% 108%, rgba(200,22,29,.20), transparent 58%),
    radial-gradient(60% 48% at 12% 6%,  rgba(166,162,154,.12), transparent 72%),
    radial-gradient(75% 55% at 92% 24%, rgba(122,13,18,.20), transparent 70%),
    linear-gradient(178deg, #0F0D0C 0%, #161413 46%, #050505 100%);
}
.hero__scene::after{
  content:""; position:absolute; inset:auto 0 0 0; height:38%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 68px),
    linear-gradient(to top, rgba(200,22,29,.10), transparent);
  -webkit-mask-image:linear-gradient(to top, #000, transparent);
          mask-image:linear-gradient(to top, #000, transparent);
}
/* video leží NAD kulisou, ta slouží jako záloha, když soubor chybí.
   Grade držíme lehký — svítání ve stopě si musí zahrát samo. */
.hero__video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.4s var(--ease);
  filter:grayscale(.4) contrast(1.15) saturate(.82) brightness(.88);
}
.hero.has-video .hero__video{ opacity:1; }
/* s reálným záběrem už kulisa ani přejezd světla nejsou potřeba */
.hero.has-video .hero__sweep{ display:none; }
.hero.has-video .hero__vignette{
  background:radial-gradient(118% 98% at 50% 44%, transparent 26%, rgba(4,4,4,.8) 100%);
}
/* clona pod textem — stopa svítí po celou dobu, takže drží skoro
   naplno, aby bílý titulek udržel kontrast nad prosvětlenou podlahou */
.hero__scrim{
  position:absolute; inset:0; opacity:0; transition:opacity 1.4s var(--ease);
  background:linear-gradient(to top, rgba(6,6,6,.94) 0%, rgba(6,6,6,.6) 36%, transparent 72%);
}
.hero.has-video .hero__scrim{ opacity:1; }
.hero.is-scrub .hero__scrim{ transition:none; }   /* clonu řídí scroll, ne přechod */
.hero__sweep{
  position:absolute; top:-40%; bottom:-40%; left:-30%; width:38%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.045) 42%, rgba(232,35,43,.13) 52%, transparent);
  transform:skewX(-14deg); animation:sweep 11s var(--ease) infinite; animation-delay:1.1s;
}
@keyframes sweep{ 0%{left:-35%}55%,100%{left:118%} }
.hero__vignette{
  position:absolute; inset:0;
  background:radial-gradient(110% 90% at 50% 45%, transparent 34%, rgba(5,5,5,.74) 100%);
}
/* jemné zrno jen v úvodu, ne přes celou stránku */
.hero__media::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

.hero__body{ position:relative; z-index:2; width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--pad); }

.hero__title{
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-hero); line-height:1.06; letter-spacing:.012em; text-transform:uppercase;
  margin:0 0 clamp(1.2rem,3vh,2.2rem); text-shadow:0 2px 26px rgba(0,0,0,.55);
}
.hero__title .line{ display:block; overflow:hidden; padding-top:.26em; margin-top:-.26em; }
.hero__title .line>span{ display:block; }
.line--signal>span{ color:var(--signal-h); }

/* ── dva akty hero: nabídka v šeru, krédo za světla ─────── */
/* Oba akty leží na sobě v jedné buňce mřížky a zarovnávají se dolů —
   tlačítka pod nimi tak drží místo, ať je vidět kterýkoli z aktů. */
.hero__akty{ display:grid; }
.hero__akt{ grid-area:1/1; align-self:end; will-change:opacity, transform; }
.hero__akt .lede{ color:#C7C1B6; max-width:52ch; }
.hero__akt--kredo{ opacity:0; }        /* naskočí, až se rozední — řídí JS */

.hero__kredo{
  font-size:clamp(1.4rem, min(3.6vw, 5.4vh), 3rem); line-height:1.12; letter-spacing:-.02em;
  font-family:var(--cond); font-weight:500; max-width:26ch; margin:0 0 1.5rem;
  color:var(--bone-2); text-wrap:balance;
}
/* slova nesvítí naráz — dopisují se, jak přibývá světla */
.hero__kredo .w{ display:inline-block; opacity:.16; transition:opacity .45s var(--ease); }
.hero__kredo .w.on{ opacity:1; }
.hero__podpis{
  display:inline-block; margin:0; font-size:.76rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--bone-2);
  border-top:1px solid var(--signal); padding-top:.7rem;
}
.hero__podpis span{ color:var(--ash); }

.hero__cta{
  display:flex; gap:.8rem; flex-wrap:wrap;
  padding-top:clamp(1.4rem,3.6vh,2.4rem); padding-bottom:clamp(1.8rem,5.5vh,4rem);
}
.hero .btn--ghost>span{ color:var(--bone); border-color:rgba(237,233,224,.32); }
.hero .btn--ghost:hover>span{ background:var(--bone); color:var(--void); border-color:var(--bone); }

/* statická záloha (chybí video, neumí se přetáčet, vypnutý pohyb):
   akty se nepřekrývají, poskládají se pod sebe a jsou vidět oba */
.hero.is-static .hero__akty{ display:block; }
.hero.is-static .hero__akt{ grid-area:auto; }
.hero.is-static .hero__akt--kredo{ opacity:1; margin-top:clamp(1.6rem,4vh,2.6rem); }

/* ── načtení prvního aktu ──────────────────────────────── */
/* rolování hýbe až obálkou .hero__akt, nájezd uvnitř si drží CSS */
[data-load]{ opacity:0; }
.is-ready [data-load]{ animation:fadeUp .85s var(--ease) forwards; }
.is-ready .hero__title .line>span{ transform:translateY(105%); animation:riseIn .95s var(--ease) forwards; }
.is-ready [data-load="2"]>span{animation-delay:.18s}
.is-ready [data-load="3"]>span{animation-delay:.27s}
.is-ready [data-load="4"]>span{animation-delay:.36s}
.is-ready [data-load="5"]{animation-delay:.5s}
.is-ready [data-load="6"]{animation-delay:.58s}
[data-load="2"],[data-load="3"],[data-load="4"]{ opacity:1; }
@keyframes fadeUp{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none} }
@keyframes riseIn{ to{ transform:none; } }

@media (max-width:820px){ .hero{ --hero-drah:250svh; } }

/* ── čísla ─────────────────────────────────────────────── */
.stats{ border-bottom:1px solid var(--rule); background:var(--bg); color:var(--fg); }
.stats__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.stat{ padding:clamp(1.8rem,4vw,3rem) 0; border-left:1px solid var(--rule); padding-left:clamp(1rem,2vw,2rem); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat__num{
  display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.1rem,4.9vw,3.8rem);
  letter-spacing:0; word-spacing:-.22em; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--fg);
}
.stat__label{ display:block; margin-top:.7rem; font-size:var(--fs-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); }

/* ── RENTGEN (signature) — řez vozem na světlém ────────── */
/* jediný světlejší panel na stránce — šedý vůz by se v černé
   ztratil, tak pod něj svítí dílenská lampa */
.xray{
  --bg:      var(--steel);
  --surface: #2A2724;
  --rule:    #302C29;
  --rule-2:  #423D38;
  position:relative; height:420vh; background:var(--bg); color:var(--fg);
}
.xray__sticky{
  position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center;
  gap:clamp(.5rem,2vh,1.6rem); padding-block:calc(var(--nav-h) + 1rem) 2rem; overflow:hidden;
}
.xray__sticky::before{           /* milimetrový papír */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
    repeating-linear-gradient(0deg,  var(--rule) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, var(--rule) 0 1px, transparent 1px 56px);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000 20%, transparent 78%);
          mask-image:radial-gradient(80% 70% at 50% 50%, #000 20%, transparent 78%);
}
.xray__head{ position:relative; z-index:2; }
.xray__title{
  font-family:var(--display); font-weight:400;
  font-size:clamp(2rem,5.4vw,4.6rem); line-height:1.1; letter-spacing:.01em; text-transform:uppercase;
}
.xray__stage{ position:relative; z-index:1; flex:1; min-height:0; display:grid; place-items:center; padding-inline:var(--pad); }
/* světlo lampy — vůz stojí v kuželu, hrany panelu padají do tmy */
.xray__stage::before{
  content:""; position:absolute; inset:-10% -6%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(58% 52% at 50% 46%, rgba(246,244,239,.10), transparent 72%),
    radial-gradient(90% 78% at 50% 50%, transparent 42%, rgba(5,5,5,.62) 100%);
}
.xray__svg{ width:100%; max-width:1440px; height:100%; max-height:100%; }

.xray__photo{ pointer-events:none; }

/* otvory v horní (celé) vrstvě — rostou ze středu, jak se roluje */
.xray__svg .hole,
.xray__svg .ring{
  transform:scale(0); transform-box:fill-box; transform-origin:50% 50%;
  transition:transform .8s var(--ease-io);
}
.xray__svg .hole.on,
.xray__svg .ring.on{ transform:scale(1); }
/* hranice řezu se kreslí jen u právě popisovaného dílu — jinak by se čárky slily */
.xray__svg .ring{
  fill:none; stroke:var(--signal); stroke-width:3; stroke-opacity:0;
  stroke-dasharray:11 16; transition:transform .8s var(--ease-io), stroke-opacity .55s var(--ease);
}
.xray__svg .ring.is-now{ stroke-opacity:.7; }

/* odkazové linky a popisky */
.xray__svg .callout{ opacity:0; transition:opacity .5s var(--ease); }
.xray__svg .callout.on{ opacity:.52; }
.xray__svg .callout.is-now{ opacity:1; }
.xray__svg .lead{
  fill:none; stroke:var(--signal); stroke-width:3; stroke-opacity:.65;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset .8s var(--ease-io);
}
.xray__svg .callout.on .lead{ stroke-dashoffset:0; }
.xray__svg .pt{ fill:none; stroke:var(--signal); stroke-width:4; }
.xray__svg .callout.is-now .pt{ fill:var(--signal-h); }
.xray__svg .num{ fill:var(--signal-h); font-family:var(--mono); font-size:24px; font-weight:500; letter-spacing:.18em; }
.xray__svg .lbl{
  fill:var(--fg); font-family:var(--cond); font-weight:700; font-size:40px; text-transform:uppercase;
  letter-spacing:.02em;
}
.xray__svg .sub{ fill:var(--fg-mute); font-family:var(--mono); font-size:25px; letter-spacing:.03em; }

.xray__readout{
  position:absolute; left:var(--pad); bottom:0; display:flex; align-items:center; gap:.8rem;
  font-size:var(--fs-mono); letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute);
}
.xray__readout-v{ color:var(--signal-h); font-variant-numeric:tabular-nums; }
.xray__readout-v b{ font-weight:600; }
.xray__gauge{ display:block; width:clamp(60px,12vw,150px); height:2px; background:var(--rule-2); }
.xray__gauge i{ display:block; height:100%; width:0; background:var(--signal); transition:width .5s var(--ease); }

.xray__list{ display:none; }
.xray__note{
  position:relative; z-index:2; max-width:52ch; margin-inline:auto; padding-inline:var(--pad);
  text-align:center; color:var(--fg-mute); font-size:var(--fs-body);
}
.xray__note b{ color:var(--fg); }

/* ── služby ────────────────────────────────────────────── */
.services{ border-bottom:1px solid var(--rule); }
.services__head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem clamp(2rem,6vw,5rem);
  align-items:end; margin-bottom:clamp(2.5rem,6vw,5rem);
}
.services__note{ color:var(--fg-mute); max-width:44ch; }
.services__note b{ color:var(--signal-h); font-weight:600; }

.svc{ border-top:1px solid var(--fg); }
.svc__row{
  position:relative; display:grid; align-items:center; gap:0 clamp(1rem,2.5vw,2.5rem);
  grid-template-columns:64px minmax(9rem,1fr) minmax(0,1.5fr) auto;
  padding:clamp(1.1rem,2.4vw,1.7rem) 0; border-bottom:1px solid var(--rule);
  transition:padding-inline .4s var(--ease);
}
.svc__row::before{
  content:""; position:absolute; inset:0; background:rgba(237,233,224,.05); opacity:0;
  transition:opacity .4s var(--ease); z-index:-1;
}
.svc__row:hover{ padding-inline:clamp(.6rem,1.4vw,1.4rem); }
.svc__row:hover::before{ opacity:1; }
.svc__code{ font-size:.7rem; letter-spacing:.16em; color:var(--signal-h); }
.svc__name{ font-family:var(--cond); font-weight:700; font-size:var(--fs-h3); line-height:1.15; text-transform:uppercase; letter-spacing:.025em; }
.svc__desc{ color:var(--fg-mute); font-size:.94rem; line-height:1.5; }
.svc__price{ font-family:var(--mono); font-size:.88rem; letter-spacing:.04em; white-space:nowrap; text-align:right; font-variant-numeric:tabular-nums; }

/* ── proces ────────────────────────────────────────────── */
.proces{ border-bottom:1px solid var(--rule); }
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1rem,2.5vw,2.4rem); margin-top:clamp(2.5rem,6vw,4.5rem); }
.step{ position:relative; padding-top:1.6rem; border-top:1px solid var(--rule); }
.step::before{
  content:""; position:absolute; top:-1px; left:0; height:1px; width:100%; background:var(--signal);
  transform:scaleX(0); transform-origin:left; transition:transform .8s var(--ease-io) .1s;
}
.step.is-in::before{ transform:scaleX(1); }
.step__n{ display:block; font-size:.72rem; letter-spacing:.2em; color:var(--signal-h); margin-bottom:1.2rem; }
.step__t{ font-family:var(--cond); font-weight:700; font-size:var(--fs-h3); line-height:1.15; margin-bottom:.7rem; text-transform:uppercase; letter-spacing:.025em; }
.step__d{ color:var(--fg-mute); font-size:.94rem; line-height:1.55; }
.step__meta{ display:inline-block; margin-top:1.2rem; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); border:1px solid var(--rule-2); padding:.32rem .6rem; }

/* ── značka ────────────────────────────────────────────── */
/* Fotky dílny sem přijdou později; do té doby drží tuhle část
   stránky logo samotné, dost velké, aby se dalo prohlédnout. */
.znacka{ overflow:hidden; }
.znacka__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,6vw,5rem); align-items:center;
}
.znacka__logo{ position:relative; margin:0; display:grid; place-items:center; }
.znacka__logo::before{                       /* světlo za značkou, ať nesedí v prázdnu */
  content:""; position:absolute; inset:-16%; z-index:0; pointer-events:none;
  background:radial-gradient(52% 48% at 50% 50%, rgba(200,22,29,.24), transparent 72%);
}
.znacka__logo .logo-mark{ position:relative; z-index:1; width:min(100%, 520px); }
.znacka__kredo{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.14; letter-spacing:.012em;
  margin:clamp(1.6rem,3vw,2.4rem) 0 0; color:var(--signal-h);
}
.znacka__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.6rem; font-size:.78rem; letter-spacing:.08em; }
.znacka__meta a{ color:var(--fg-mute); border-bottom:1px solid var(--rule-2); transition:color .25s, border-color .25s; }
.znacka__meta a:hover{ color:var(--signal-h); border-color:var(--signal); }

/* ── proč k nám ────────────────────────────────────────── */
.sliby{ border-bottom:1px solid var(--rule); }
.sliby__head{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:2rem clamp(2rem,6vw,5rem);
  align-items:end; margin-bottom:clamp(2.5rem,6vw,4.5rem);
}
.sliby__lead{ color:var(--fg-mute); font-size:var(--fs-lede); line-height:1.5; max-width:40ch; }

.pill{ display:grid; grid-template-columns:repeat(4,1fr); }
.pill__i{
  padding:0 clamp(1rem,2vw,2rem); border-left:1px solid var(--rule);
}
.pill__i:first-child{ border-left:0; padding-left:0; }
.pill__t{
  font-family:var(--cond); font-weight:700; text-transform:uppercase; letter-spacing:.025em;
  font-size:var(--fs-h3); line-height:1.15; margin-bottom:.8rem; text-wrap:balance;
  min-height:2.3em;   /* dvouřádkové nadpisy nesmí rozhodit účaří odstavců vedle sebe */
}
.pill__d{ color:var(--fg-mute); font-size:.94rem; line-height:1.55; }

.zaruka{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr); gap:1.5rem clamp(2rem,5vw,4rem);
  margin-top:clamp(2.5rem,6vw,4.5rem); padding:clamp(1.6rem,3.5vw,2.8rem);
  background:var(--surface); border-left:3px solid var(--signal);
}
.zaruka__t{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.3rem,2.5vw,2rem); line-height:1.1; letter-spacing:.012em;
  text-transform:uppercase;
}
.zaruka__b p{ color:var(--fg-mute); line-height:1.6; }
.zaruka__n{
  margin-top:1rem; font-size:.7rem; line-height:1.7; letter-spacing:.04em; color:var(--fg-mute); opacity:.8;
}

/* ── lidé, na které se dá zavolat přímo ────────────────── */
.lide{
  display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1rem,2.5vw,2.5rem);
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(1.6rem,3vw,2.4rem); border-top:1px solid var(--rule);
}
.lide__r{ display:block; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--signal-h); margin-bottom:.7rem; }
.lide__n{ font-family:var(--cond); font-weight:700; font-size:var(--fs-h3); line-height:1.15; text-transform:uppercase; letter-spacing:.025em; margin-bottom:.6rem; }
.lide__c{ font-size:.8rem; line-height:1.9; color:var(--fg-mute); }
.lide__c a{ color:var(--fg); border-bottom:1px solid var(--rule-2); transition:color .25s, border-color .25s; }
.lide__c a:hover{ color:var(--signal-h); border-color:var(--signal-h); }

/* ── rezervace (tmavý závěr stránky) ───────────────────── */
.book{ padding-block:var(--sect); background:var(--bg); color:var(--fg); }
.book__grid{ display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(2.5rem,6vw,6rem); align-items:start; }
.book__lead{ color:var(--fg-mute); max-width:38ch; margin-bottom:2rem; }
.bigtel{
  display:inline-block; font-family:var(--mono); font-size:clamp(1.3rem,2.6vw,2rem);
  letter-spacing:-.01em; border-bottom:1px solid var(--signal); padding-bottom:.3rem; transition:color .25s;
}
.bigtel:hover{ color:var(--signal-h); }
.book__pills{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem; }
.book__pills li{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-mute); border:1px solid var(--rule-2); padding:.42rem .75rem; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem clamp(1rem,2vw,2rem); }
.field{ display:flex; flex-direction:column; gap:.5rem; min-width:0; }
.field--full{ grid-column:1/-1; }
.field label{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-mute); }
.field label em{ font-style:normal; color:var(--ash-2); }
.field input,.field select,.field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--rule-2);
  padding:.7rem 0; font-size:1rem; color:var(--fg); border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{ resize:vertical; }
.field select{
  appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--signal) 50%),linear-gradient(135deg,var(--signal) 50%,transparent 50%);
  background-position:calc(100% - 12px) 55%,calc(100% - 7px) 55%; background-size:5px 5px,5px 5px;
  background-repeat:no-repeat; padding-right:2rem;
}
.field select option{ background:var(--surface); color:var(--fg); }
.field input::placeholder,.field textarea::placeholder{ color:var(--ash-2); }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-bottom-color:var(--signal-h); }
.field.is-bad input,.field.is-bad select{ border-bottom-color:var(--signal-h); }
.err{ font-family:var(--mono); font-size:.68rem; letter-spacing:.06em; color:var(--signal-h); min-height:1em; }

.form__foot{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-top:.5rem; }
.check{ display:flex; align-items:flex-start; gap:.7rem; max-width:34ch; cursor:pointer; }
.check input{ appearance:none; width:17px; height:17px; border:1px solid var(--rule-2); flex:none; margin-top:2px; cursor:pointer; transition:background .2s,border-color .2s; }
.check input:checked{ background:var(--signal); border-color:var(--signal-h); }
.check span{ font-size:.8rem; line-height:1.45; color:var(--fg-mute); font-family:var(--text); letter-spacing:0; text-transform:none; }
.form__done{ grid-column:1/-1; font-size:.78rem; letter-spacing:.1em; color:var(--signal-h); min-height:1.2em; }

/* ── kontakt ───────────────────────────────────────────── */
.kontakt{ border-top:1px solid var(--rule); }
.kontakt__grid{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.kontakt__addr{ font-style:normal; font-size:var(--fs-lede); line-height:1.8; color:var(--fg-mute); margin-bottom:2rem; }
.kontakt__addr a{ color:var(--fg); border-bottom:1px solid var(--rule-2); transition:border-color .25s,color .25s; }
.kontakt__addr a:hover{ color:var(--signal-h); border-color:var(--signal-h); }
.hours{ border:1px solid var(--rule); padding:clamp(1.4rem,3vw,2.2rem); background:var(--surface); }
.hours__h{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--signal-h); margin-bottom:1.4rem; }
.hours__list div{ display:flex; justify-content:space-between; gap:1rem; padding:.6rem 0; border-bottom:1px solid var(--rule); font-size:.82rem; }
.hours__list dt{ color:var(--fg-mute); }
.hours__list dd{ margin:0; color:var(--fg); font-variant-numeric:tabular-nums; }
.hours__note{ margin-top:1.4rem; font-size:.7rem; line-height:1.7; letter-spacing:.06em; color:var(--fg-mute); }

/* ── patička ───────────────────────────────────────────── */
.foot{ background:var(--bg); color:var(--fg); border-top:1px solid var(--rule); padding-top:clamp(2.5rem,5vw,4rem); overflow:hidden; }
.foot__top{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; padding-bottom:clamp(2rem,5vw,4rem); }
.foot__nav{ display:flex; gap:clamp(1rem,2.4vw,2.2rem); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
.foot__nav a{ color:var(--fg-mute); transition:color .25s; }
.foot__nav a:hover{ color:var(--signal-h); }
.foot__meta{ font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ash-2); }
.foot__word{ line-height:.94; padding-inline:var(--pad); }
.foot__word span{
  display:block; white-space:nowrap; font-size:clamp(2rem,12.4vw,12.8rem);
  text-transform:uppercase; letter-spacing:.01em;
  font-family:var(--display); font-weight:400;
  color:transparent; -webkit-text-stroke:1px #2F2B27;
  transform:translateY(15%);
}

/* ── odhalování při scrollu ────────────────────────────── */
[data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
.svc__row[data-reveal]{ transform:translateY(14px); }

/* ── responzivita ──────────────────────────────────────── */
@media (max-width:1080px){
  .nav__links{ display:none; }
  .nav__tel{ display:none; }
  .burger{ display:block; }
  .services__head,.znacka__grid,.kontakt__grid,.book__grid,.sliby__head{ grid-template-columns:1fr; }
  .znacka__logo{ order:-1; }
  .pill{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; }
  .pill__i:nth-child(odd){ border-left:0; padding-left:0; }
  .steps{ grid-template-columns:repeat(2,1fr); gap:2rem 1.5rem; }
}
@media (max-width:820px){
  .stats__grid{ grid-template-columns:1fr 1fr; }
  .zaruka{ grid-template-columns:1fr; }
  .lide{ grid-template-columns:1fr; gap:2rem; }
  .stat{ padding:1.4rem 0 1.4rem clamp(1rem,4vw,2rem); }
  .stat:nth-child(odd){ border-left:0; padding-left:0; }
  .stat:nth-child(n+3){ border-top:1px solid var(--rule); }

  .xray{ height:340vh; }
  .xray__stage{ flex:0 1 auto; }          /* na telefonu se scéna smrskne na výšku obrázku */
  .xray__svg{ max-width:none; height:auto; }
  .xray__svg .callouts{ display:none; }
  .xray__list{
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem 1.2rem;
    padding-inline:var(--pad); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-mute);
  }
  .xray__list li{ border-top:1px solid var(--rule); padding-top:.45rem; transition:color .4s var(--ease); }
  .xray__list li.on{ color:var(--fg); }
  .xray__list li.on::before{ content:""; float:right; width:6px; height:6px; margin-top:.42rem; background:var(--signal); }
  .xray__readout{ position:static; justify-self:stretch; width:100%; padding-inline:var(--pad); margin-top:.4rem; justify-content:flex-start; }
  .xray__note{ display:none; }

  .svc__row{ grid-template-columns:44px minmax(0,1fr) auto; gap:.25rem 1rem; }
  .svc__code{ grid-column:1; grid-row:1/3; align-self:start; padding-top:.35rem; }
  .svc__name{ grid-column:2; grid-row:1; }
  .svc__price{ grid-column:3; grid-row:1; text-align:right; align-self:baseline; }
  .svc__desc{ grid-column:2/-1; grid-row:2; }

  .form{ grid-template-columns:1fr; }
  .form__foot{ align-items:flex-start; }
  .marks::before,.marks::after,.marks>.mark-r{ display:none; }
}
@media (max-width:560px){
  /* na telefonu je „zavolat“ užitečnější než tlačítko rezervace */
  .nav .btn--signal{ display:none; }
  .nav__tel{ display:inline-block; color:var(--signal-h); font-size:.78rem; letter-spacing:.04em; }
  .steps{ grid-template-columns:1fr; }
  .pill{ grid-template-columns:1fr; }
  .pill__t{ min-height:0; }
  .pill__i{ border-left:0; padding:1.4rem 0; border-top:1px solid var(--rule); }
  .pill__i:first-child{ padding-top:0; border-top:0; }
  .pill__i:last-child{ padding-bottom:0; }
  .hero__cta{ width:100%; }
  .hero__cta .btn{ flex:1 1 100%; }
  .hero__cta .btn>span{ flex:1; justify-content:center; }
  .foot__top{ flex-direction:column; align-items:flex-start; }
}

/* ── omezený pohyb ─────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  [data-reveal]{ opacity:1; transform:none; }
  [data-load]{ opacity:1 !important; }
  .hero__akt{ opacity:1 !important; transform:none !important; }
  .hero__title .line>span{ transform:none !important; }
  .hero__kredo .w{ opacity:1; }
  .xray__svg .callout{ opacity:1; }
  .xray__svg .lead{ stroke-dashoffset:0; }
  .xray__svg .hole,.xray__svg .ring{ transform:scale(1); }
  .step::before{ transform:scaleX(1); }
  .hero__sweep{ display:none; }
  .hero{ height:auto !important; }
  .hero__stage{ position:static !important; }
  .shutter{ display:none; }
}