:root{
  --papir:#eceee3;
  --papir-svetly:#f6f7f0;
  --tuzka:#3a3d38;
  --zelena:#1d6b12;
  --tmava:#12380b;
  --zluta:#f2e400;
  --kura:#5b3b22;
  --text:#22261f;
  --ruka:"Shantell Sans",system-ui,sans-serif;
  --telo:"Sofia Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papir);color:var(--text);font:400 18px/1.55 var(--telo);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--ruka);font-weight:700;line-height:1.08;margin:0}
p{margin:0 0 1em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.obal{max-width:1240px;margin:0 auto;padding:0 32px}
:focus-visible{outline:3px solid var(--zelena);outline-offset:3px}
section{scroll-margin-top:96px}

/* žlutý pruh – přesně podle pneu-doksy */
.demo-strip{position:fixed;inset:0 0 auto 0;z-index:70;height:30px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 12px;background:#ffd84d;color:#1a1a1a;font:600 13px/1 system-ui,sans-serif;white-space:nowrap;overflow:hidden}
.demo-strip b{text-transform:uppercase;letter-spacing:.08em;font-weight:800}
.demo-strip a{color:inherit}
.demo-strip .ds-sep{opacity:.5}
.demo-strip .ds-short{display:none}
@media (max-width:520px){.demo-strip .ds-long{display:none}.demo-strip .ds-short{display:inline}}

/* hlavička */
.hlava{position:sticky;top:30px;z-index:60;display:flex;align-items:center;gap:28px;padding:12px 32px;background:var(--papir);border-bottom:2px solid var(--tuzka);margin-top:30px}
.hlava-logo img{width:190px}
.hlava-nav{display:flex;gap:26px;margin-left:auto;font:600 18px/1 var(--ruka)}
.hlava-nav a{text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.hlava-nav a:hover{border-color:var(--zelena)}
.hlava-tel{background:var(--tmava);color:#fff;text-decoration:none;font:700 17px/1 var(--telo);padding:12px 16px;border-radius:6px;white-space:nowrap;transition:background .15s}
.hlava-tel:hover{background:var(--zelena)}
.hlava-menu{display:none}

/* úvod = list se skicou */
.uvod{background:var(--papir);overflow:hidden}
.uvod-in{max-width:1400px;margin:0 auto;padding:36px 32px 44px;display:grid;grid-template-columns:minmax(300px,5fr) 7fr;gap:48px;align-items:center;min-height:calc(100vh - 100px)}
.uvod h1{font-size:clamp(44px,5.4vw,84px);letter-spacing:-.01em;color:var(--tmava);margin-bottom:22px}
.uvod-perex{font-size:20px;max-width:34em}
.stav{display:flex;align-items:center;gap:10px;font:600 17px/1.3 var(--telo);margin:22px 0}
.stav-tecka{flex:0 0 12px;height:12px;border-radius:50%;background:#9a9c94;box-shadow:0 0 0 3px rgba(0,0,0,.06)}
.stav.otevreno .stav-tecka{background:#2a9a16}
.stav.zavreno .stav-tecka{background:#b4341e}
.uvod-tel{display:flex;flex-wrap:wrap;gap:12px}
.tl{display:inline-flex;flex-direction:column;justify-content:center;text-decoration:none;font:800 22px/1.1 var(--telo);padding:12px 20px;border-radius:6px;transition:transform .15s,background .15s}
.tl small{font:600 14px/1.2 var(--telo);opacity:.85}
.tl:active{transform:translateY(1px)}
.tl-plny{background:var(--tmava);color:#fff}
.tl-plny:hover{background:var(--zelena)}
.tl-obrys{border:2px solid var(--tmava);color:var(--tmava)}
.tl-obrys:hover{background:rgba(29,107,18,.08)}

.list{margin:0;grid-column:2;grid-row:1}
.uvod-text{grid-column:1;grid-row:1}
.list-papir{position:relative;background:#fbfbf6;padding:14px;border:1px solid #cfd1c4;box-shadow:0 1px 0 #d9dbcf,0 14px 30px -18px rgba(30,40,20,.35)}
.skica{display:block;width:100%;height:auto;aspect-ratio:4/3}
.tuzka path{stroke:var(--tuzka);stroke-width:2.3;opacity:.9;stroke-dasharray:1;stroke-dashoffset:0}
.tuzka path.slaba{stroke-width:1.5;opacity:.6}
.popisky text{font:600 25px var(--ruka);fill:var(--zelena)}
.list figcaption{font-size:15px;color:#5d6157;margin-top:10px;max-width:46em}
.js .tuzka path{stroke-dashoffset:1}
.kresli .tuzka path{animation:kresli 1.3s cubic-bezier(.45,.05,.3,1) both}
.kresli .tuzka path:nth-child(3n+1){animation-delay:.08s}
.kresli .tuzka path:nth-child(3n+2){animation-delay:.18s}
.js .popisky text{opacity:0}
.kresli .popisky text{animation:objev .5s 1s both}
@keyframes kresli{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes objev{from{opacity:0}to{opacity:1}}

/* nadpis s čarou tužkou */
.cara{position:relative;display:inline-block;padding-bottom:14px}
.cara::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:10px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C60 2 120 9 180 5 S260 3 298 6' fill='none' stroke='%23f2e400' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;transform-origin:left;transition:transform .7s cubic-bezier(.5,0,.2,1)}
.realizace .cara::after,.prodejna .cara::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C60 2 120 9 180 5 S260 3 298 6' fill='none' stroke='%231d6b12' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E")}
.js .cara:not(.videt)::after{transform:scaleX(0)}

/* služby */
.sluzby{background:var(--tmava);color:#eef1e6;padding:96px 0 104px}
.sluzby .obal{display:grid;grid-template-columns:4fr 8fr;gap:56px;align-items:start}
.sluzby-hlava{position:sticky;top:130px}
.sluzby h2{font-size:clamp(38px,4vw,60px);color:#fff;margin-bottom:22px}
.sluzby-tel{display:block;text-decoration:none;color:var(--zluta);font:800 40px/1.05 var(--telo);margin-top:26px}
.sluzby-tel small{display:block;font:600 15px/1.3 var(--telo);color:#cfd6c3}
.sluzby-mail{display:inline-block;margin-top:8px;color:#fff}
.zakazky{list-style:none;margin:0;padding:0}
.zakazky li{display:grid;grid-template-columns:260px 1fr;gap:30px;padding:28px 0;border-top:1px solid rgba(255,255,255,.22)}
.zakazky li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.zakazky img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.zakazky img.na-vysku{object-position:50% 30%}
.zakazky h3{font-size:30px;color:var(--zluta);margin:2px 0 10px}
.zakazky p{margin:0;max-width:36em}

/* realizace */
.realizace{padding:96px 0}
.realizace h2{font-size:clamp(38px,4vw,60px);color:var(--tmava)}
.realizace-perex{font-size:20px;margin:18px 0 28px;max-width:40em}
.postup{list-style:none;padding:0;margin:0 0 72px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:krok}
.postup li{counter-increment:krok}
.postup img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.postup span{display:block;font:600 21px/1.2 var(--ruka);color:var(--tuzka);margin-top:10px}
.postup span::before{content:counter(krok) ". ";color:var(--zelena)}
.galerie{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:18px}
.galerie figure{margin:0;position:relative;overflow:hidden;border-radius:3px}
.galerie .g-velka{grid-column:span 2;grid-row:span 2}
.galerie .g-siroka{grid-column:span 2}
.galerie img{width:100%;height:100%;object-fit:cover}
.galerie figcaption{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);background:var(--papir-svetly);color:var(--tmava);font:600 17px/1.2 var(--ruka);padding:5px 10px 6px;border-radius:2px;border-left:4px solid var(--zelena)}

/* prodejna */
.prodejna{background:var(--papir-svetly);display:grid;grid-template-columns:1fr 1fr;border-top:2px solid var(--tuzka)}
.prodejna-foto img{width:100%;height:100%;object-fit:cover;object-position:20% 50%;min-height:520px}
.prodejna-info{padding:72px 56px 56px;align-self:center;max-width:640px}
.prodejna h2{font-size:clamp(38px,4vw,58px);color:var(--tmava);margin-bottom:22px}
.hodiny{border-collapse:collapse;width:100%;margin:26px 0 12px;font-size:18px}
.hodiny caption{text-align:left;font:700 22px var(--ruka);color:var(--tmava);padding-bottom:6px}
.hodiny th,.hodiny td{text-align:left;padding:11px 10px 11px 0;border-bottom:1px solid #cfd1c4;font-weight:400}
.hodiny th{font-weight:700}
.hodiny td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.hodiny tr.ted th,.hodiny tr.ted td{color:var(--zelena)}
.svatky{font-size:16px;color:#4d5147}
.prodejna-kontakt a{font-weight:700}
.prodejna-kontakt span{color:#5d6157;font-size:16px}
.sortiment{grid-column:1/-1;padding-top:72px;padding-bottom:96px}
.sortiment-nadpis{font-size:clamp(32px,3.2vw,46px);color:var(--tmava);margin-bottom:30px}
.sortiment-sloupce{display:grid;grid-template-columns:repeat(4,1fr);gap:36px}
.sortiment h4{font-size:23px;color:var(--zelena);margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid var(--tuzka)}
.sortiment ul{margin:0;padding:0 0 0 1.05em;font-size:17px}
.sortiment li{margin-bottom:8px}
.sortiment li::marker{color:var(--zelena)}
.sortiment-pozn{margin-top:26px;font-size:17px}
.prodejna-fotky{display:grid;grid-template-columns:2fr 1fr 1fr;gap:18px;margin:40px 0 56px}
.prodejna-fotky img{width:100%;height:280px;object-fit:cover;border-radius:3px}
.jmeno{max-width:760px;border-left:4px solid var(--zluta);padding:6px 0 6px 24px}
.jmeno h3{font-size:28px;color:var(--tmava);margin-bottom:10px}
.jmeno p{margin:0}

/* kontakt – barvy jejich cedule */
.kontakt{background:var(--zluta);color:var(--tmava);padding:88px 0}
.kontakt-in{display:grid;grid-template-columns:5fr 7fr;gap:56px}
.kontakt-logo{width:240px;margin-bottom:26px}
.kontakt h2{font-size:clamp(40px,4vw,62px);margin-bottom:18px}
.adresa{font-size:20px}
.tl-tmavy{background:var(--tmava);color:#fff;font-size:19px}
.tl-tmavy:hover{background:var(--zelena)}
.kontakt-cisla{display:grid;grid-template-columns:1fr 1fr;gap:32px 40px;align-content:start}
.kontakt-cisla h3{font-size:24px;margin-bottom:8px}
.kontakt-cisla a{display:block;font-weight:600}
.kontakt-cisla .velke{font:800 38px/1.1 var(--telo);text-decoration:none;margin-bottom:4px}
.kontakt-cisla p{font-size:16px;margin:6px 0 0}
.kontakt blockquote{grid-column:1/-1;margin:8px 0 0;padding:20px 0 0;border-top:2px solid var(--tmava)}
.kontakt blockquote p{font:600 26px/1.3 var(--ruka);margin:0 0 6px}
.kontakt blockquote footer{font-size:16px}
.fb{grid-column:1/-1;margin:0}

.pata{background:var(--tmava);color:#d7dccd;font-size:15px;padding:30px 0 34px}
.pata p{margin:0 0 6px}
.pata a{color:#fff}

/* střední šířky */
@media (max-width:1180px){
  .hlava{gap:18px;padding:12px 24px}
  .hlava-nav{gap:18px}
  .ht-long{display:none}
  .sortiment-sloupce{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .uvod-in{grid-template-columns:1fr;gap:24px;min-height:0;padding-top:20px}
  .list,.uvod-text{grid-column:auto;grid-row:auto}
  .sluzby .obal,.kontakt-in{grid-template-columns:1fr;gap:36px}
  .sluzby-hlava{position:static}
  .prodejna{grid-template-columns:1fr}
  .prodejna-foto img{min-height:0;height:56vw;max-height:480px}
  .prodejna-info{padding:48px 32px 0;max-width:none}
  .galerie{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
}
@media (max-width:820px){
  .hlava-menu{display:block;margin-left:auto;width:46px;height:42px;border:2px solid var(--tuzka);border-radius:6px;background:transparent;position:relative;cursor:pointer}
  .hlava-menu span:first-child,.hlava-menu span:first-child::before,.hlava-menu span:first-child::after{position:absolute;left:10px;right:10px;height:2px;background:var(--tuzka);content:""}
  .hlava-menu span:first-child{top:19px}
  .hlava-menu span:first-child::before{left:0;right:0;top:-7px}
  .hlava-menu span:first-child::after{left:0;right:0;top:7px}
  .hlava-nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;background:var(--papir);border-bottom:2px solid var(--tuzka);padding:6px 24px 14px}
  .hlava-nav a{padding:12px 0;border-bottom:1px solid #cfd1c4;font-size:20px}
  .hlava.otevreno .hlava-nav{display:flex}
  .hlava-tel{order:2;padding:11px 12px;font-size:16px}
  .hlava-menu{order:3;margin-left:0}
  .hlava-logo{margin-right:auto}
}
@media (max-width:640px){
  body{font-size:17px}
  .obal{padding:0 18px}
  .hlava{padding:10px 16px;gap:10px}
  .hlava-logo img{width:132px}
  .uvod-in{padding:22px 16px 34px}
  .uvod h1{font-size:42px;margin-bottom:14px}
  .uvod-perex{font-size:17px}
  .stav{font-size:16px;margin:16px 0}
  .tl{font-size:20px;padding:10px 16px}
  .uvod-tel .tl{flex:1 1 150px}
  .list-papir{padding:8px;margin:0 -6px}
  .popisky text{font-size:30px}
  .sluzby,.realizace{padding:64px 0}
  .sluzby-tel{font-size:34px}
  .zakazky li{grid-template-columns:1fr;gap:14px}
  .zakazky h3{font-size:27px}
  .postup{grid-template-columns:1fr;gap:22px;margin-bottom:48px}
  .galerie{grid-template-columns:1fr 1fr;grid-auto-rows:150px;gap:10px}
  .galerie .g-velka,.galerie .g-siroka{grid-column:span 2;grid-row:span 1}
  .galerie .g-velka{grid-row:span 2}
  .galerie figcaption{font-size:14px;left:6px;bottom:6px;max-width:calc(100% - 12px);padding:3px 7px 4px}
  .prodejna-info{padding:40px 18px 0}
  .hodiny{font-size:16px}
  .hodiny td:nth-child(2){display:none}
  .sortiment{padding-top:52px;padding-bottom:64px}
  .sortiment-sloupce{grid-template-columns:1fr;gap:26px}
  .prodejna-fotky{grid-template-columns:1fr 1fr}
  .prodejna-fotky img:first-child{grid-column:1/-1}
  .prodejna-fotky img{height:200px}
  .kontakt{padding:60px 0}
  .kontakt-cisla{grid-template-columns:1fr}
  .kontakt-cisla .velke{font-size:34px}
  .kontakt-logo{width:190px}
}
@media (max-width:380px){
  .hlava-logo img{width:116px}
  .hlava-tel{font-size:15px;padding:10px}
}

@media (prefers-reduced-motion:reduce){
  .js .tuzka path,.kresli .tuzka path{animation:none;stroke-dashoffset:0}.js .popisky text{animation:none;opacity:1}
  .js .cara:not(.videt)::after{transform:none}
  *{transition:none!important}
}