/* ═══════════════════════════════════════════════════════════
   WECTRA — wectra.studio
   Postavené na Wectra Brand Guidelines V1.1.
   Paper 62 / Ink 30 / Vermilion 6. Dve písma, bez výnimiek.
   Hranaté rohy. Vlasové linky namiesto tieňov. Nič sa neopakuje v cykle.

   Jediná zámerná výnimka: demo web stolárstva v sekcii Ukážka.
   Je to ukážka klientskej práce, nie náš vlastný povrch — má preto
   vlastné farby, vlastné písmo aj zaoblené rohy. Celá výnimka je
   uzavretá pod .demo--after a .old, nikde inde neplatí.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* 02 — COLOR */
  --ink:#131417;
  --paper:#F2F0EA;

  /* Signálna farba má dve podoby, lebo jedna nesedí na obe plochy.
     Namerané proti #F2F0EA / #131417:
       #FF4A1F   2,95 : 1  na papieri   ·   5,48 : 1  na inku
       #CB300B   4,65 : 1  na papieri   ·   3,48 : 1  na inku
     Jasná preto ostáva na tmavých plochách a na výplniach, ktoré nie sú
     text; stmavená ide na text na papieri, kde ako jediná prejde
     WCAG AA (4,5 : 1 pre bežný text). Recenzia navrhovala #D9350D,
     tá ale reálne meria len 4,13 : 1 — nestačí. */
  --sig:#FF4A1F;
  --sig-ink:#CB300B;
  --signal:var(--sig-ink);

  --ink-72:rgba(19,20,23,.72);
  --ink-65:rgba(19,20,23,.65);
  --ink-55:rgba(19,20,23,.55);
  --ink-45:rgba(19,20,23,.45);
  --ink-40:rgba(19,20,23,.40);
  --ink-30:rgba(19,20,23,.30);
  --rule:rgba(19,20,23,.15);
  --hover:#ECEAE2;

  --pap-75:rgba(242,240,234,.75);
  --pap-65:rgba(242,240,234,.65);
  --pap-50:rgba(242,240,234,.50);
  --pap-45:rgba(242,240,234,.45);
  --pap-35:rgba(242,240,234,.35);
  --pap-25:rgba(242,240,234,.25);
  --rule-i:rgba(242,240,234,.15);

  /* 03 — TYPOGRAPHY */
  --disp:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;

  /* 07 — MOTION: jedna krivka, tri trvania */
  --ease:cubic-bezier(.2,0,0,1);
  --t-micro:120ms;
  --t-el:200ms;
  --t-sec:320ms;

  /* rozmery */
  --wrap:1280px;
  --pad:clamp(20px,4vw,32px);
  --band:clamp(52px,7vw,72px);

  /* lokálne, prepisované na tmavých plochách */
  --fg:var(--ink);
  --fg-soft:var(--ink-65);
  --fg-mute:var(--ink-45);
  --fg-rule:var(--rule);
  --fg-bg:var(--paper);
}

/* ── reset ─────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;border-radius:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--disp);font-weight:400;
  font-size:15px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:0}
fieldset{border:0;min-width:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
::selection{background:var(--sig-ink);color:var(--paper)}

h1,h2,h3{font-weight:700;letter-spacing:-.02em;line-height:1.04;text-wrap:balance}

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

.skip{
  position:absolute;left:0;top:-100px;z-index:200;
  background:var(--ink);color:var(--paper);padding:12px 20px;
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  transition:top var(--t-micro) var(--ease);
}
.skip:focus{top:0}

/* mono hlas — len popisky, nikdy odstavce */
.glyph,.dot{font-family:var(--mono);font-weight:400}
.dot{color:var(--signal);font-size:.85em}
.sig{color:var(--signal)}

.lnk{border-bottom:1px solid currentColor;padding-bottom:1px;transition:color var(--t-micro) var(--ease)}
.lnk:hover{color:var(--signal)}

/* ── plochy ────────────────────────────────────────────── */
.band{position:relative}
.band--rule{border-bottom:1px solid var(--rule)}
.band--graph{
  background-image:
    linear-gradient(rgba(19,20,23,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,20,23,.05) 1px,transparent 1px);
  background-size:32px 32px;
}
.band--ink{
  background:var(--ink);
  --signal:var(--sig);
  --fg:var(--paper);
  --fg-soft:var(--pap-65);
  --fg-mute:var(--pap-45);
  --fg-rule:var(--rule-i);
  --fg-bg:var(--ink);
  color:var(--paper);
  border-bottom:0;
}
.wrap{
  max-width:var(--wrap);margin-inline:auto;
  padding:var(--band) var(--pad);
}

/* ── 04 — mono anotácia sekcií ─────────────────────────── */
.meta{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px 24px;flex-wrap:wrap;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:clamp(22px,3vw,30px);
}
.meta__no{color:var(--signal)}
.meta__fig{color:var(--fg-mute)}
.meta--sub{
  margin-top:clamp(44px,6vw,68px);
  padding-top:16px;border-top:1px solid var(--fg-rule);
}

.idx{
  display:block;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--signal);
}

/* ── typografická stupnica ─────────────────────────────── */
.h1{font-size:clamp(38px,7.4vw,72px);line-height:1.02;letter-spacing:-.022em;max-width:16ch}
.h1--sm{font-size:clamp(34px,5.6vw,58px);max-width:18ch}
.h2{font-size:clamp(28px,4.6vw,44px);line-height:1.05;letter-spacing:-.018em;margin-bottom:20px}
.h4{font-size:clamp(17px,1.6vw,18px);line-height:1.2;letter-spacing:-.012em}

.lead{font-size:clamp(15px,1.4vw,17px);line-height:1.65;color:var(--fg-soft);max-width:58ch}
.lead--wide{max-width:62ch;margin-bottom:clamp(32px,4.5vw,44px)}
.note{
  font-size:13.5px;line-height:1.7;color:var(--fg-soft);
  max-width:66ch;padding-left:16px;border-left:1px solid var(--fg-rule);
  margin-top:26px;
}

/* ── 09 — tlačidlá: hranaté, bez rádiusu ──────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--disp);font-weight:500;font-size:14px;
  padding:13px 22px;border:1px solid transparent;cursor:pointer;
  transition:background-color var(--t-micro) var(--ease),
             color var(--t-micro) var(--ease),
             border-color var(--t-micro) var(--ease);
}
.btn .glyph{transition:transform var(--t-micro) var(--ease)}
.btn:hover .glyph{transform:translateX(3px)}
.btn--full{width:100%}

.btn--ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
/* hover: tmavšia signálna, aby paper text na nej prešiel 4,6:1 */
.btn--ink:hover{background:var(--sig-ink);border-color:var(--sig-ink);color:var(--paper)}

.btn--line{border-color:var(--ink);color:var(--ink)}
.btn--line:hover{background:var(--ink);color:var(--paper)}

.btn--sig{background:var(--sig);color:var(--ink);border-color:var(--sig);font-weight:700}
.btn--sig:hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}

/* ── značky / tagy ─────────────────────────────────────── */
.tags{
  display:flex;flex-wrap:wrap;gap:6px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.tags li{border:1px solid var(--ink-30);padding:5px 9px;color:var(--ink-65)}
.tags--serve{margin-top:clamp(34px,4.5vw,48px)}

/* ── 06 — figúry v rezacích značkách ──────────────────── */
.fig{position:relative;border:1px solid var(--rule);background:var(--fg-bg)}
.fig::before,.fig::after,
.fig__marks::before,.fig__marks::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;z-index:3;
}
.fig::before{top:8px;left:8px;border-top:1.5px solid var(--fg);border-left:1.5px solid var(--fg)}
.fig::after{bottom:8px;right:8px;border-bottom:1.5px solid var(--fg);border-right:1.5px solid var(--fg)}
.fig__marks::before{top:8px;right:8px;border-top:1.5px solid var(--fg);border-right:1.5px solid var(--fg)}
.fig__marks::after{bottom:8px;left:8px;border-bottom:1.5px solid var(--fg);border-left:1.5px solid var(--fg)}
.fig__ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-40);
  text-align:center;padding:20px;
}
.fig__cap{
  margin-top:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-mute);
}

/* ── vlasová mriežka buniek ────────────────────────────── */
.grid{display:grid;gap:1px;background:var(--fg-rule);border:1px solid var(--fg-rule)}
.cell{background:var(--fg-bg);padding:clamp(22px,2.4vw,28px) clamp(20px,2.2vw,26px)}
@media (min-width:760px){.grid--2{grid-template-columns:repeat(2,1fr)}}
@media (min-width:700px){.grid--3{grid-template-columns:repeat(3,1fr)}}

.cell--ink{
  background:var(--ink);color:var(--paper);
  --signal:var(--sig);
  --fg:var(--paper);--fg-soft:var(--pap-65);--fg-mute:var(--pap-45);--fg-rule:var(--rule-i);
}

.rules .cell{display:grid;gap:12px;align-content:start}
.rules p{font-size:13.5px;line-height:1.65;color:var(--fg-soft)}

/* ── veľké merateľné čísla ─────────────────────────────── */
.figures{display:grid;gap:26px 32px;margin-top:clamp(28px,4vw,36px)}
@media (min-width:620px){.figures{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.figures{grid-template-columns:repeat(4,1fr)}}
.figures li{border-top:2px solid var(--fg);padding-top:14px;display:grid;gap:6px}
.figures strong{font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1;letter-spacing:-.03em}
.figures strong .glyph{font-size:.6em;font-weight:400;padding:0 .1em;vertical-align:.1em}
.figures span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--fg-soft)}

/* ══════════ NAV ══════════ */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.nav__inner{
  max-width:var(--wrap);margin-inline:auto;padding:15px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.lockup{display:inline-flex;align-items:center;gap:10px;color:var(--fg)}
.mark{width:24px;height:24px;flex:none}
.lockup__word{
  font-family:var(--disp);font-weight:700;font-size:16px;
  letter-spacing:.12em;text-transform:uppercase;
}

.nav__toggle{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  border:1px solid var(--ink-30);padding:9px 14px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  transition:background-color var(--t-micro) var(--ease),color var(--t-micro) var(--ease);
}
.nav__toggle:hover{background:var(--ink);color:var(--paper)}
.nav__bars{display:grid;gap:4px;width:14px}
.nav__bars i{display:block;height:1.5px;background:currentColor;transition:transform var(--t-micro) var(--ease)}
.nav__toggle[aria-expanded="true"] .nav__bars i:first-child{transform:translateY(2.75px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__bars i:last-child{transform:translateY(-2.75px) rotate(-45deg)}

.nav__menu{display:none}
.nav__menu.is-open{
  display:block;position:absolute;left:0;right:0;top:100%;
  background:var(--paper);border-bottom:1px solid var(--rule);
  padding:8px var(--pad) 20px;
}
.nav__list a{
  display:block;padding:13px 0;border-bottom:1px solid var(--rule);
  font-size:16px;transition:color var(--t-micro) var(--ease);
}
.nav__list a:hover{color:var(--signal)}
.nav__list a[aria-current="page"]{color:var(--signal)}
.nav__cta{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:11px 16px;
  transition:background-color var(--t-micro) var(--ease);
}
.nav__cta:hover,.nav__cta[aria-current="page"]{background:var(--sig-ink)}

@media (min-width:940px){
  .nav__toggle{display:none}
  .nav__menu{display:flex;align-items:center;gap:28px}
  .nav__menu.is-open{position:static;border:0;padding:0}
  .nav__list{display:flex;gap:26px}
  .nav__list a{
    padding:0;border:0;
    font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--ink-72);
  }
  .nav__list a[aria-current="page"]{color:var(--signal)}
  .nav__cta{margin-top:0}
}

/* ══════════ HERO / HLAVIČKY STRÁNOK ══════════ */
.hero__sub{
  font-size:clamp(15.5px,1.5vw,17px);line-height:1.65;color:var(--ink-72);
  max-width:60ch;margin-top:22px;
}
.hero__sub--tight{font-size:14.5px;margin-top:14px;color:var(--ink-65);max-width:58ch}
.hero__act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.hero__note{
  font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-55);
}
.pagehead .tags{margin-bottom:20px}

/* FIG. A — výkres dvoch šírok */
.plan{margin-top:clamp(40px,5.5vw,60px)}
.plan__fig{padding:clamp(26px,3.4vw,40px) clamp(20px,3vw,36px) clamp(16px,2vw,22px)}
.plan__stage{
  display:grid;gap:clamp(16px,2.6vw,32px);
  grid-template-columns:1fr;justify-items:center;align-items:end;
}
@media (min-width:620px){
  .plan__stage{grid-template-columns:minmax(0,1fr) clamp(94px,11vw,132px);justify-items:stretch}
}

.dev{border:1px solid var(--ink);background:var(--paper);width:100%}
.dev--phone{max-width:132px;justify-self:center}
.dev__chrome{
  display:flex;align-items:center;gap:5px;
  padding:7px 9px;border-bottom:1px solid var(--ink);
}
.dev__chrome i{width:6px;height:6px;border:1px solid var(--ink-45)}
.dev__chrome span{
  margin-left:8px;font-family:var(--mono);font-size:9px;letter-spacing:.04em;
  color:var(--ink-45);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.dev__chrome--sm{justify-content:center;padding:0;height:11px;position:relative}
.dev__chrome--sm::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:26px;height:2px;background:var(--ink-30);
}
.dev__body{padding:12px;display:grid;gap:10px}
.dev__body--sm{padding:8px;gap:7px}

.wf__nav{display:flex;align-items:center;justify-content:space-between}
.wf__logo{width:26px;height:5px;background:var(--ink)}
.wf__links{display:flex;gap:5px}
.wf__links i{width:14px;height:3px;background:var(--ink-30)}
.wf__burger{display:grid;gap:2.5px}
.wf__burger i{display:block;width:10px;height:1.5px;background:var(--ink-45)}
.wf__hero{display:grid;gap:7px;padding:18px 0 10px}
.dev__body--sm .wf__hero{padding:11px 0 7px;gap:5px}
.wf__ln{height:11px;width:54%;background:var(--ink)}
.wf__ln--s{width:34%}
.dev__body--sm .wf__ln{height:7px;width:74%}
.dev__body--sm .wf__ln--s{width:48%}
.wf__txt{height:3px;width:44%;background:var(--ink-30);margin-top:4px}
.wf__txt--s{width:32%;margin-top:0}
.dev__body--sm .wf__txt{height:2.5px;width:66%}
.wf__btn{width:64px;height:14px;background:var(--sig);margin-top:8px}
.dev__body--sm .wf__btn{width:38px;height:9px;margin-top:5px}
.wf__row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wf__row span{height:40px;border:1px solid var(--rule);background:rgba(19,20,23,.035)}
.wf__col{display:grid;gap:5px}
.wf__col span{height:16px;border:1px solid var(--rule);background:rgba(19,20,23,.035)}

.plan__dims{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(18px,2.4vw,26px);padding-top:12px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;color:var(--ink-45);
}

/* číselný pás */
.stats{
  display:grid;gap:22px 32px;
  margin-top:clamp(40px,5.5vw,60px);padding-top:18px;
  border-top:1px solid var(--rule);
}
@media (min-width:620px){.stats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.stats{grid-template-columns:repeat(4,1fr)}}
.stats li{display:flex;align-items:baseline;gap:10px}
.stats strong{font-size:clamp(26px,2.6vw,34px);font-weight:700;line-height:1;letter-spacing:-.03em;white-space:nowrap}
.stats span{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-55);line-height:1.5}

/* ══════════ DVE LÍNIE V HERO ══════════ */
.lines{
  display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-top:clamp(30px,4vw,42px);
}
@media (min-width:700px){.lines{grid-template-columns:1fr 1fr}}
.line{
  background:var(--paper);padding:clamp(22px,2.4vw,28px) clamp(20px,2.2vw,26px);
  display:grid;gap:10px;align-content:start;
  transition:background-color var(--t-micro) var(--ease);
}
.line:hover{background:var(--hover)}
.line__t{font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-.022em;line-height:1.15}
.line__p{font-weight:700;font-size:clamp(20px,2.1vw,25px);letter-spacing:-.028em;line-height:1}
.line__d{font-size:13.5px;line-height:1.6;color:var(--ink-65)}
.line__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:6px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-72);
}
.line .glyph{transition:transform var(--t-micro) var(--ease)}
.line:hover .glyph{transform:translateX(3px)}

/* ══════════ OTÁZKY: pravý stĺpec ══════════ */
/* Bez neho ostávala na 1440 px pravá polovica prázdna. */
.faqwrap{display:grid;gap:clamp(28px,4vw,52px);align-items:start}
@media (min-width:1000px){
  .faqwrap{grid-template-columns:minmax(0,1fr) clamp(260px,25vw,330px)}
}
.faqside{
  border:1px solid var(--rule);padding:clamp(22px,2.4vw,28px);
  display:grid;gap:14px;align-content:start;
}
@media (min-width:1000px){.faqside{position:sticky;top:88px}}
.faqside__t{font-weight:700;font-size:clamp(18px,1.9vw,21px);letter-spacing:-.02em;line-height:1.2}
.faqside p{font-size:13.5px;line-height:1.65;color:var(--ink-65)}
.faqside .btn{margin-top:2px}

/* ══════════ VÝZVA POD OBSAHOM (.pick) ══════════ */
.pick{
  border:1px solid var(--rule);padding:clamp(26px,3.4vw,36px) clamp(20px,3vw,32px);
  display:grid;gap:12px;justify-items:start;margin-top:clamp(32px,4vw,44px);
}
.pick__q{font-weight:700;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em;line-height:1.2}
.pick__note{font-size:13.5px;line-height:1.65;color:var(--ink-65);max-width:60ch}
.pick .btn{margin-top:6px}

/* ══════════ UPÚTAVKA NA UKÁŽKU ══════════ */
.teaser{display:grid;gap:clamp(30px,4.5vw,56px);align-items:center}
@media (min-width:880px){.teaser{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}}
.teaser__txt .lead+.lead{margin-top:14px}
.teaser__txt .btn{margin-top:12px}
.teaser__fig .fig{padding:12px}
/* bez pevného pomeru — starý web je krátky a karta sa mu prispôsobí */
.teaser__stage{container-type:inline-size;overflow:hidden;background:#FDFDF6}
.teaser__stage .old{height:auto;padding-bottom:8cqw}

/* ══════════ POSTUP ══════════ */
.steps{display:grid;gap:32px}
@media (min-width:640px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{border-top:2px solid var(--ink);padding-top:16px;display:grid;gap:10px;align-content:start}
.step__t{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);padding:4px 8px;justify-self:start;
}
.step p:last-child{font-size:13.5px;line-height:1.65;color:var(--ink-65)}

.total{
  display:flex;align-items:baseline;gap:14px 18px;flex-wrap:wrap;
  margin-top:clamp(34px,4.5vw,46px);padding:20px 22px;
  border:1px solid var(--ink);background:var(--paper);
}
.total__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--ink-45)}
.total strong{font-size:clamp(24px,2.6vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1}
.total__v{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink-55)}

/* ══════════ ŠTÚDIO ══════════ */
.studio{display:grid;gap:clamp(30px,4vw,52px);align-items:start}
@media (min-width:880px){.studio{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.studio__txt p+p{margin-top:14px;font-size:14.5px;line-height:1.7;color:var(--ink-65)}
.spec{
  display:grid;gap:9px;margin-top:26px;padding-top:18px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);font-size:11px;letter-spacing:.04em;
}
.spec>div{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:baseline}
.spec dt{color:var(--ink-45);letter-spacing:.1em}
.spec dd{color:var(--ink-72)}
@media (max-width:460px){.spec>div{grid-template-columns:1fr;gap:2px}}

.studio__people{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.person__fig{aspect-ratio:3/4}
.person figcaption{display:grid;gap:4px;margin-top:11px}
.person figcaption strong{font-weight:700;font-size:15px;letter-spacing:-.012em}
.person figcaption span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-45)}

/* ══════════ PRÍPADOVÁ ŠTÚDIA ══════════ */
.case{margin-bottom:clamp(28px,4vw,40px)}
.case__fig{aspect-ratio:16/10;padding:0;overflow:hidden}
.case__fig img{width:100%;height:100%;object-fit:cover}
.case__txt{display:grid;gap:clamp(22px,3vw,32px)}
@media (min-width:760px){.case__txt{grid-template-columns:repeat(3,1fr)}}
.case__txt>div{display:grid;gap:10px;align-content:start;padding-top:14px;border-top:1px solid var(--rule)}
.case__txt p:last-child{font-size:13.5px;line-height:1.65;color:var(--ink-65)}

.quote{
  margin-top:clamp(32px,4.5vw,44px);
  border-left:2px solid var(--ink);padding:4px 0 4px 22px;
  display:grid;gap:16px;max-width:62ch;
}
.quote__t{font-weight:700;font-size:clamp(18px,2.1vw,24px);letter-spacing:-.02em;line-height:1.35}
.quote__t::before{content:"„"}
.quote__t::after{content:"\201C"}
.quote footer{display:grid;gap:4px}
.quote footer strong{font-size:14px;font-weight:700}
.quote footer span{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-45)}

.tags--demo{margin-bottom:18px}

/* ══════════ PORTFÓLIO (napĺňa sa z administrácie) ══════════ */
/* Kým v administrácii nie sú položky, injektor označí zoznam
   atribútom data-prazdny a celá sekcia sa nezobrazí. */
#portfolio:has([data-prazdny]){display:none}
.praca{display:grid;gap:clamp(24px,3vw,34px)}
@media (min-width:760px){.praca{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.praca{grid-template-columns:repeat(3,1fr)}}
.praca__fig{aspect-ratio:16/11;overflow:hidden;padding:0;margin-bottom:16px}
.praca__fig img{width:100%;height:100%;object-fit:cover}
/* položka bez fotky nemá ukazovať prázdny rámik s rezacími značkami */
.praca__fig:not(:has(img[src])){display:none}
.praca__o{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--signal);margin-bottom:8px;
}
.praca__k .h4{margin-bottom:8px}
.praca__p{font-size:13.5px;line-height:1.65;color:var(--ink-65)}

/* fotografie ľudí a screenshot v prípadovej štúdii */
.person__fig img,.case__fig img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
.person__fig:has(img:not([hidden])) .fig__ph,
.case__fig:has(img:not([hidden])) .fig__ph{display:none}
.case__fig img{position:static}

/* ══════════ UKÁŽKA — POROVNANIE ══════════ */
.work{display:grid;gap:22px;align-items:end}
@media (min-width:920px){
  .work{grid-template-columns:minmax(0,1fr) clamp(200px,21vw,250px);gap:26px}
}
.cmp__fig{padding:14px}
.shot__fig{padding:10px}

/* container-type: rozmery demo webu sa počítajú z jeho vlastnej šírky,
   nie z okna — inak by mobilná figúra dostala desktopovú stupnicu */
.cmp__stage{
  position:relative;overflow:hidden;background:#fff;
  container-type:inline-size;
  aspect-ratio:4/3;touch-action:pan-y;--pos:42%;
}
@media (min-width:640px){.cmp__stage{aspect-ratio:16/10;max-height:520px}}
.cmp__stage--mob{aspect-ratio:9/14;max-height:none}
@media (min-width:640px){.cmp__stage--mob{aspect-ratio:9/15;max-height:520px}}

.demo{position:absolute;inset:0;overflow:hidden}
.demo--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);background:#FDFDF6}

.cmp__div{
  position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--sig);
  transform:translateX(-1px);z-index:4;pointer-events:none;
}
.cmp__grip{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:34px;height:34px;background:var(--sig);color:var(--ink);
  display:grid;place-items:center;
  font-family:var(--mono);font-size:13px;font-weight:600;letter-spacing:-.06em;
}
.cmp__grip--sm{width:26px;height:26px;font-size:11px}
.cmp__tag{
  position:absolute;bottom:10px;z-index:5;pointer-events:none;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.14em;
  padding:4px 8px;background:var(--ink);color:var(--paper);
  outline:1px solid var(--pap-25);
}
.cmp__stage--mob .cmp__tag{font-size:9px;padding:3px 6px;bottom:8px;letter-spacing:.1em}
.cmp__tag--l{left:10px}
.cmp__tag--r{right:10px}
.cmp__stage--mob .cmp__tag--l{left:8px}
.cmp__stage--mob .cmp__tag--r{right:8px}
.cmp__range{
  position:absolute;inset:0;width:100%;height:100%;z-index:6;
  opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;
}
.cmp__range::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:100%;cursor:ew-resize}
.cmp__range::-moz-range-thumb{width:40px;height:100%;border:0;background:transparent;cursor:ew-resize}
.cmp__range:focus-visible{opacity:1;background:rgba(255,74,31,.07);outline:2px solid var(--sig);outline-offset:-2px}


/* ═══════════════════════════════════════════════════════════
   DEMO WEB STOLÁRSTVA — cudzia značka, nie naša
   Teplý ovsený papier, tmavý orech, tmavozelený akcent,
   geometrický grotesk a zaoblené fotografie. Je to zámerné:
   klientska práca nemá vyzerať ako naše portfólio. Platí len
   tu, pod .demo--after a .old, nikde inde.
   ═══════════════════════════════════════════════════════════ */
.demo--after{
  --c-bg:#EFE8DC;
  --c-panel:#E5DACA;
  --c-ink:#241B14;
  --c-ink2:rgba(36,27,20,.66);
  --c-line:rgba(36,27,20,.16);
  --c-acc:#0F5952;
  --c-disp:Futura,'Avenir Next','Century Gothic','Trebuchet MS',sans-serif;
  --c-body:'Avenir Next','Segoe UI',system-ui,sans-serif;

  /* filmové zrno — bez neho fotky z gradientov vyzerajú ako grafika */
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");

  background:var(--c-bg);color:var(--c-ink);
  font-family:var(--c-body);
  display:grid;grid-template-rows:auto 1fr auto;
}

.demo__nav{
  display:flex;align-items:center;justify-content:space-between;gap:2cqw;
  padding:2.4cqw 4cqw;border-bottom:1px solid var(--c-line);
}
.demo__logo{
  font-family:var(--c-disp);font-size:clamp(7px,2.1cqw,23px);
  font-weight:700;letter-spacing:.02em;line-height:1;
}
.demo__logo em{font-style:normal;color:var(--c-acc)}
/* Mock počítača si drží desktopové rozloženie aj v úzkej figúre —
   je to zmenšený model obrazovky, nie responzívny web. Preto tu
   nie sú container queries, len mierka v cqw. */
.demo__links{display:flex;gap:2.4cqw}
.demo--mob .demo__links{display:none}
.demo__links i{font-style:normal;font-size:clamp(4.5px,1.05cqw,12px);color:var(--c-ink2)}
.demo__links i:first-child{color:var(--c-ink);font-weight:700}
.demo__call{
  font-family:var(--c-disp);font-weight:700;font-size:clamp(4.5px,1cqw,12px);
  background:var(--c-acc);color:#EFE8DC;border-radius:4px;
  padding:1cqw 2.4cqw;white-space:nowrap;
}
.demo__burger{display:grid;gap:.8cqw}
.demo__burger i{display:block;width:3.6cqw;height:1.4px;background:var(--c-ink)}

/* hero — delený: fotka vľavo, textový panel vpravo.
   Panel začína na 50 %, takže pri základnom oreze posuvníka (42 %)
   je celý obsah nového webu čitateľný. */
.demo__hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}

.demo__shot{position:relative;overflow:hidden;background-size:140px 140px,auto,auto,auto,auto,auto,auto}
.demo__badge{
  position:absolute;left:3cqw;bottom:3cqw;
  display:inline-flex;align-items:baseline;gap:1cqw;
  font-size:clamp(4px,.92cqw,11px);
  background:rgba(239,232,220,.94);color:var(--c-ink);
  border-radius:3px;padding:.9cqw 1.8cqw;
}
.demo__badge b{color:var(--c-acc);font-weight:700}

.demo__panel{
  background:var(--c-panel);padding:3.4cqw 4cqw;
  display:grid;align-content:center;gap:2cqw;
}
.demo__kick{
  font-family:var(--c-disp);font-size:clamp(4px,.94cqw,11px);
  letter-spacing:.22em;text-transform:uppercase;color:var(--c-acc);font-weight:700;
}
.demo__h1{
  font-family:var(--c-disp);font-weight:700;
  font-size:clamp(9px,3.5cqw,40px);line-height:1.08;letter-spacing:-.015em;
}
.demo__sub{font-size:clamp(4.5px,1.05cqw,13px);line-height:1.6;color:var(--c-ink2);max-width:34cqw}
.demo__acts{display:flex;flex-wrap:wrap;align-items:center;gap:1.8cqw}
.demo__cta{
  font-family:var(--c-disp);font-weight:700;border-radius:4px;
  background:var(--c-acc);color:#EFE8DC;
  font-size:clamp(4.5px,1.12cqw,13px);
  padding:clamp(3px,1.1cqw,13px) clamp(6px,2.2cqw,26px);
}
.demo__cta2{
  font-size:clamp(4.5px,1.05cqw,12px);color:var(--c-ink);
  border-bottom:1.5px solid var(--c-acc);padding-bottom:.4cqw;
}

/* cenník služieb — to, čo zákazník remeselníka naozaj hľadá */
.demo__svc{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;
  padding-top:2.2cqw;border-top:1px solid var(--c-line);
}
.demo__svc div{display:grid;gap:.5cqw}
.demo__svc b{font-family:var(--c-disp);font-size:clamp(4.5px,1.02cqw,12px);font-weight:700}
.demo__svc i{font-style:normal;font-size:clamp(4px,.94cqw,11px);color:var(--c-acc);font-weight:700}

/* pás realizácií */
.demo__gal{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6cqw;padding:2.4cqw 4cqw 3cqw}
.demo__gal span{
  display:block;height:clamp(14px,7.4cqw,80px);border-radius:6px;
  background-size:140px 140px,auto,auto,auto,auto,auto;
}

/* „fotografie" — vrstvené gradienty, nie prázdne obdĺžniky.
   Prechody sú mäkké zámerne: ostré hrany by z toho spravili grafiku. */
.demo__ph--wood{
  background-image:
    var(--grain),
    linear-gradient(92deg, rgba(60,38,20,.16) 0 .6%, transparent .6% 12%, rgba(60,38,20,.13) 12% 12.5%, transparent 12.5% 27%, rgba(60,38,20,.15) 27% 27.6%, transparent 27.6% 41%, rgba(60,38,20,.12) 41% 41.5%, transparent 41.5% 58%, rgba(60,38,20,.14) 58% 58.6%, transparent 58.6% 74%, rgba(60,38,20,.12) 74% 74.5%, transparent 74.5% 90%, rgba(60,38,20,.14) 90% 90.6%, transparent 90.6%),
    radial-gradient(52% 60% at 26% 14%, rgba(255,236,196,.55), transparent 68%),
    radial-gradient(38% 44% at 82% 84%, rgba(72,42,18,.34), transparent 72%),
    linear-gradient(174deg, rgba(0,0,0,0) 0 62%, rgba(46,28,14,.34) 100%),
    linear-gradient(160deg,#C08E56 0%,#9A6A3B 48%,#6E4826 100%);
}
.demo__ph--shelf{
  background-image:
    var(--grain),
    linear-gradient(180deg, transparent 0 26%, rgba(50,30,14,.30) 26% 28%, transparent 28% 58%, rgba(50,30,14,.30) 58% 60%, transparent 60%),
    radial-gradient(46% 54% at 22% 18%, rgba(255,238,204,.44), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 44%, rgba(28,16,6,.36) 100%),
    linear-gradient(158deg,#B98A55 0%,#8B5F35 52%,#5C3B1E 100%);
}
.demo__ph--stairs{
  background-image:
    var(--grain),
    linear-gradient(38deg, rgba(46,26,10,.30) 0 8%, transparent 8% 20%, rgba(46,26,10,.28) 20% 28%, transparent 28% 40%, rgba(46,26,10,.26) 40% 48%, transparent 48% 60%, rgba(46,26,10,.24) 60% 68%, transparent 68%),
    radial-gradient(50% 56% at 78% 16%, rgba(255,240,210,.42), transparent 70%),
    radial-gradient(120% 120% at 50% 50%, transparent 42%, rgba(28,16,6,.38) 100%),
    linear-gradient(150deg,#C1955F 0%,#8E6238 54%,#5A3A1D 100%);
}
.demo__ph--desk{
  background-image:
    var(--grain),
    radial-gradient(28% 34% at 32% 46%, rgba(28,16,6,.26), transparent 72%),
    radial-gradient(48% 52% at 74% 20%, rgba(255,238,206,.46), transparent 70%),
    linear-gradient(178deg, transparent 0 54%, rgba(48,28,12,.30) 56% 100%),
    linear-gradient(164deg,#C79A62 0%,#94663A 50%,#5F3D1F 100%);
}

/* ── mobilná verzia demo webu ─────────────────────────────
   Panel aj cenník sú zúžené doprava, aby pri základnom oreze
   (36 %) ostali celé na viditeľnej strane. */
.demo--mob{grid-template-rows:auto auto 1fr}
.demo--mob .demo__nav{padding:5cqw 6cqw}
.demo--mob .demo__logo{font-size:clamp(9px,5.4cqw,17px)}
.demo--mob .demo__hero{grid-template-columns:1fr;grid-template-rows:auto auto}
.demo--mob .demo__shot{height:44cqw;min-height:56px}
.demo--mob .demo__badge{left:auto;right:6cqw;bottom:3.4cqw;font-size:clamp(4.5px,2.4cqw,9px);padding:1.6cqw 3cqw;gap:1.6cqw}
.demo--mob .demo__panel{
  padding:6cqw;gap:3.4cqw;justify-items:end;text-align:right;
}
.demo--mob .demo__kick{font-size:clamp(4.5px,2.4cqw,9px);letter-spacing:.16em}
.demo--mob .demo__h1{font-size:clamp(13px,7.2cqw,24px);max-width:55cqw}
.demo--mob .demo__acts{justify-content:flex-end;gap:3.4cqw}
.demo--mob .demo__cta{font-size:clamp(6.5px,3.2cqw,12px);padding:2.6cqw 5cqw}
.demo--mob .demo__cta2{font-size:clamp(6px,3cqw,11px);padding-bottom:1cqw}
.demo--mob .demo__svc{
  grid-template-columns:1fr;gap:2.2cqw;width:54cqw;margin-left:auto;
  padding-top:3.4cqw;text-align:right;
}
.demo--mob .demo__svc div{
  display:flex;align-items:baseline;justify-content:flex-end;gap:2.4cqw;
}
.demo--mob .demo__svc b{font-size:clamp(6px,3.2cqw,12px)}
.demo--mob .demo__svc i{font-size:clamp(5.5px,2.8cqw,11px)}

/* demo web — pôvodný stav */
.old{
  height:100%;padding:5cqw 5.5cqw;background:#FDFDF6;color:#0A0A0A;
  font-family:'Times New Roman',Times,serif;text-align:center;
  display:grid;align-content:start;gap:2.6cqw;
  border-top:clamp(6px,1.4cqw,16px) solid #1F4FA8;
}
.old__t{font-size:clamp(9px,2.5cqw,26px);font-weight:700;color:#1F4FA8;line-height:1.15}
.old__s{font-size:clamp(6px,1.25cqw,14px);letter-spacing:.05em}
.old__l{font-size:clamp(5.5px,1.15cqw,13px);color:#0033CC;text-decoration:underline}
.old__b{
  font-size:clamp(5.5px,1.15cqw,13px);border:1px solid #999;background:#FFFFCC;
  padding:2.5cqw 3cqw;margin-inline:auto;max-width:90%;line-height:1.45;
}
.old__b u{color:#0033CC}
.old__sm{font-size:clamp(5px,1cqw,11px);color:#666;font-style:italic}
.old__c{
  font-family:var(--mono);font-size:clamp(5px,1cqw,11px);color:#333;
  background:#DDD;border:1px solid #999;padding:1px 7px;justify-self:center;
}
.old--mob{padding:9cqw 6cqw;gap:4.5cqw}
.old--mob .old__t{font-size:clamp(8px,5.4cqw,17px)}
.old--mob .old__s{font-size:clamp(5.5px,3cqw,10px)}
.old--mob .old__l{font-size:clamp(5px,2.8cqw,9.5px)}
.old--mob .old__b{font-size:clamp(5px,2.8cqw,9.5px);padding:4cqw;max-width:100%}
.old--mob .old__sm{font-size:clamp(4.5px,2.4cqw,8.5px)}
.old--mob .old__c{font-size:clamp(4.5px,2.4cqw,8.5px)}

/* ══════════ OTÁZKY ══════════ */
.faq{border-top:1px solid var(--rule)}
.q{border-bottom:1px solid var(--rule)}
.q summary{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:14px 20px;
  padding:22px 0;cursor:pointer;list-style:none;
  transition:color var(--t-micro) var(--ease);
}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--signal)}
.q summary .idx{padding-top:.35em;min-width:44px}
.q__t{font-weight:700;font-size:clamp(17px,1.9vw,22px);letter-spacing:-.018em;line-height:1.25}
.q__pm{position:relative;width:18px;height:18px;margin-top:.3em;flex:none}
.q__pm::before,.q__pm::after{
  content:"";position:absolute;left:50%;top:50%;background:currentColor;
  transition:transform var(--t-micro) var(--ease),opacity var(--t-micro) var(--ease);
}
.q__pm::before{width:14px;height:1.5px;transform:translate(-50%,-50%)}
.q__pm::after{width:1.5px;height:14px;transform:translate(-50%,-50%)}
.q[open] .q__pm::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.q__a{padding:0 0 26px;max-width:70ch;display:grid;gap:13px;margin-left:64px}
@media (max-width:520px){.q__a{margin-left:0}}
.q__a p{font-size:14.5px;line-height:1.7;color:var(--ink-65)}

/* ══════════ KONTAKT ══════════ */
.contact{display:grid;gap:clamp(36px,5vw,64px)}
@media (min-width:940px){.contact{grid-template-columns:1fr 1fr;align-items:start}}
.contact .h1{margin-bottom:18px}

.direct{
  display:grid;gap:11px;margin-top:26px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
}
.direct>div{display:grid;grid-template-columns:130px 1fr;gap:14px;align-items:baseline}
.direct dt{color:var(--pap-45);letter-spacing:.1em}
.direct dd{color:var(--paper)}
.direct a{border-bottom:1px solid var(--pap-25);padding-bottom:1px;transition:color var(--t-micro) var(--ease)}
.direct a:hover{color:var(--signal);border-bottom-color:var(--signal)}
@media (max-width:460px){.direct>div{grid-template-columns:1fr;gap:2px}}

.form{display:grid;gap:14px}
.f{display:grid;gap:6px}
.f label{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--pap-45);
}
.f input[type="text"],.f textarea,.sel select{
  width:100%;border:1px solid var(--pap-25);color:var(--paper);
  font-family:var(--disp);font-size:14px;padding:13px 14px;
  transition:border-color var(--t-micro) var(--ease);
}
.f textarea{resize:vertical;min-height:104px;line-height:1.6}
.f input::placeholder,.f textarea::placeholder{color:var(--pap-35)}
.f input:hover,.f textarea:hover,.sel select:hover{border-color:var(--pap-50)}
.f input:focus,.f textarea:focus,.sel select:focus{border-color:var(--sig);outline:none}
.f input:focus-visible,.f textarea:focus-visible,.sel select:focus-visible{outline:2px solid var(--sig);outline-offset:1px}

.sel{position:relative}
.sel select{appearance:none;-webkit-appearance:none;padding-right:42px;cursor:pointer}
.sel select option{background:var(--ink);color:var(--paper)}
.sel__g{
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  font-family:var(--mono);color:var(--pap-45);pointer-events:none;
}

.f--check{grid-template-columns:auto 1fr;align-items:start;gap:11px;margin-top:4px}
.f--check input{width:17px;height:17px;margin-top:3px;accent-color:var(--sig);cursor:pointer;border:1px solid var(--pap-25)}
.f--check label{
  font-family:var(--disp);font-size:13px;line-height:1.55;letter-spacing:0;
  text-transform:none;color:var(--pap-65);cursor:pointer;
}
.f--check label a{color:var(--sig);border-bottom:1px solid var(--sig)}
.f--check .f__err{grid-column:1/-1}

.f__err{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--signal)}
.f.is-bad input,.f.is-bad textarea,.f.is-bad select{border-color:var(--signal)}

.form__fine{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--pap-35);margin-top:2px;
}
/* pasca na roboty — mimo obrazovky, ale nie display:none,
   inak ju časť botov preskočí */
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

.form__st{
  border:1px solid var(--pap-50);padding:14px 16px;
  font-size:13.5px;line-height:1.6;color:var(--paper);
}
.form__st.is-bad{border-color:var(--sig)}
.form__st a{color:var(--sig);border-bottom:1px solid var(--sig)}

/* ══════════ ZÁVEREČNÝ TMAVÝ PÁS ══════════ */
.close__in{display:grid;gap:clamp(28px,4vw,56px)}
@media (min-width:860px){
  .close__in{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);align-items:center}
}
.close .h2{margin-bottom:16px}
.close__act{display:grid;gap:10px;justify-items:start}
@media (min-width:860px){.close__act{justify-items:end;text-align:right}}
.close__or{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--pap-45);margin-top:10px;
}
.close__tel{
  font-weight:700;font-size:clamp(20px,2.4vw,28px);letter-spacing:-.025em;line-height:1.1;
  border-bottom:1px solid var(--pap-25);padding-bottom:2px;
  transition:color var(--t-micro) var(--ease),border-color var(--t-micro) var(--ease);
}
.close__tel:hover{color:var(--signal);border-bottom-color:var(--signal)}
.close__tel--sm{font-size:clamp(17px,1.9vw,21px)}
.close+.foot{border-top:1px solid var(--rule-i)}

/* ══════════ FOOTER ══════════ */
.foot .wrap{padding-block:clamp(40px,5vw,52px) 26px}
.foot__top{display:grid;gap:clamp(30px,4vw,48px);padding-bottom:clamp(30px,4vw,40px)}
@media (min-width:860px){.foot__top{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
.foot__claim{
  font-family:var(--mono);font-size:10.5px;line-height:1.75;letter-spacing:.06em;
  color:var(--pap-50);margin-top:12px;max-width:36ch;
}
.foot__cols{display:grid;gap:26px}
@media (min-width:560px){.foot__cols{grid-template-columns:repeat(3,1fr)}}
.foot__col h3{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.12em;color:var(--pap-45);margin-bottom:14px;
}
.foot__col ul{display:grid;gap:9px;font-family:var(--mono);font-size:11px;letter-spacing:.04em}
.foot__col li{color:var(--pap-75)}
.foot__col a{transition:color var(--t-micro) var(--ease)}
.foot__col a:hover{color:var(--signal)}
.ph{
  border:1px solid var(--rule-i);padding:1px 6px;color:var(--pap-50);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.foot__bot{
  display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
  padding-top:16px;border-top:1px solid var(--rule-i);
  font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--pap-45);
}

/* ═══════════════════════════════════════════════════════════
   07 — MOTION
   Manuál je prísny a držíme sa ho: 120 / 200 / 320 ms,
   jedna krivka, posun o 12 px, hover mení plochu alebo posunie
   šípku. Nič nezväčšuje, nesvieti, nepláva a NIČ SA NEOPAKUJE.
   Dlhší je len rytmus medzi prvkami (oneskorenia), nie samotné
   animácie.
   ═══════════════════════════════════════════════════════════ */

/* --pos je registrovaná, takže sa dá plynulo animovať.
   Posuvník pred/po tak reaguje na šípky mäkko, pri ťahaní nie. */
@property --pos{syntax:'<percentage>';inherits:true;initial-value:42%}

/* ── vstup stránky: prvky sa raz zdvihnú a stoja ───────── */
.js .rise{
  opacity:0;transform:translateY(12px);
  animation:rise var(--t-sec) var(--ease) forwards;
  animation-delay:var(--d,0ms);
}
@keyframes rise{to{opacity:1;transform:none}}

.js .reveal{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--t-el) var(--ease),transform var(--t-el) var(--ease);
}
.js .reveal.is-visible{opacity:1;transform:none}

/* ── nadpis po riadkoch ────────────────────────────────── */
/* .ln nemá overflow:hidden zámerne — pri zalomení na mobile
   by maskovanie odrezalo druhý riadok. */
.ln{display:block}
.js .ln{
  opacity:0;transform:translateY(16px);
  animation:rise var(--t-sec) var(--ease) forwards;
  animation-delay:var(--d,0ms);
}

/* ── rezacie značky sa dokreslia ───────────────────────── */
.js .fig::before,.js .fig::after,
.js .fig__marks::before,.js .fig__marks::after{
  width:0;height:0;
  transition:width var(--t-el) var(--ease),height var(--t-el) var(--ease);
}
.js .fig.is-drawn::before,.js .fig.is-drawn::after,
.js .fig.is-drawn .fig__marks::before,.js .fig.is-drawn .fig__marks::after{
  width:12px;height:12px;
}
.js .fig.is-drawn .fig__marks::before{transition-delay:70ms}
.js .fig.is-drawn::after{transition-delay:140ms}
.js .fig.is-drawn .fig__marks::after{transition-delay:210ms}

/* ── linky nad číslami a krokmi sa natiahnu zľava ──────── */
.js .figures li,.js .step{position:relative;border-top-color:transparent}
.js .figures li::before,.js .step::before{
  content:"";position:absolute;top:-2px;left:0;right:0;height:2px;
  background:var(--fg);transform:scaleX(0);transform-origin:left;
  transition:transform var(--t-sec) var(--ease);
}
.js .figures.is-visible li::before,.js .step.is-visible::before{transform:none}
.js .figures.is-visible li:nth-child(2)::before{transition-delay:70ms}
.js .figures.is-visible li:nth-child(3)::before{transition-delay:140ms}
.js .figures.is-visible li:nth-child(4)::before{transition-delay:210ms}

/* ── navigácia sa po odrolovaní stiahne ────────────────── */
.nav__inner{transition:padding-block var(--t-el) var(--ease)}
.nav.is-stuck .nav__inner{padding-block:9px}

/* ── mobilné menu ──────────────────────────────────────── */
@media (max-width:939px){
  .nav__menu.is-open{animation:menuIn var(--t-el) var(--ease) both}
  .nav__menu.is-open .nav__list li,
  .nav__menu.is-open .nav__cta{
    animation:rise var(--t-el) var(--ease) both;
  }
  .nav__menu.is-open .nav__list li:nth-child(1){animation-delay:40ms}
  .nav__menu.is-open .nav__list li:nth-child(2){animation-delay:75ms}
  .nav__menu.is-open .nav__list li:nth-child(3){animation-delay:110ms}
  .nav__menu.is-open .nav__list li:nth-child(4){animation-delay:145ms}
  .nav__menu.is-open .nav__cta{animation-delay:180ms}
}
@keyframes menuIn{from{opacity:0;transform:translateY(-8px)}}

/* ── otázky: plynulé otvorenie ─────────────────────────── */
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  .q::details-content{
    block-size:0;overflow:hidden;
    transition:block-size var(--t-el) var(--ease),
               content-visibility var(--t-el) allow-discrete;
  }
  .q[open]::details-content{block-size:auto}
}

/* ── posuvník pred/po ──────────────────────────────────── */
.cmp__stage{transition:--pos var(--t-micro) var(--ease)}
.cmp__stage.is-dragging{transition:none}

/* ── prechod medzi stránkami ───────────────────────────── */
@view-transition{navigation:auto}
.nav{view-transition-name:nav}
.foot{view-transition-name:foot}
::view-transition-old(root){animation:vtOut var(--t-micro) var(--ease) both}
::view-transition-new(root){animation:vtIn var(--t-el) var(--ease) both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* ── kto si nepraje pohyb, ten ho nedostane ────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .js .rise,.js .reveal,.js .ln{opacity:1;transform:none}
  .js .fig::before,.js .fig::after,
  .js .fig__marks::before,.js .fig__marks::after{width:12px;height:12px}
  .js .figures li,.js .step{border-top-color:var(--fg)}
  .js .figures li::before,.js .step::before{transform:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}


/* ═══════════════════════════════════════════════════════════
   REDIZAJN 2026 — kompozičná vrstva
   Tokeny, rezacie značky aj mriežka ostávajú z manuálu. Nové sú
   len zostavy: štvorstĺpcový index služieb, karty práce v značkách
   a prepínač jazyka. Nič z toho nepridáva novú farbu ani písmo.
   ═══════════════════════════════════════════════════════════ */

/* ── štvorstĺpcový index (002 — SLUŽBY) ───────────────── */
@media (min-width:620px){ .grid--4{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1000px){ .grid--4{grid-template-columns:repeat(4,1fr)} }

/* bunka, ktorá je celá odkaz: mono značka hore, stack dole */
.cell--link{
  display:flex;flex-direction:column;gap:14px;
  min-height:210px;
  transition:background-color var(--t-micro) var(--ease);
}
.cell--link:hover{background:var(--hover)}
.cell--link .h4{font-size:20px;line-height:1.15}
.cell--link p{font-size:13.5px;line-height:1.6;color:var(--fg-soft);margin:0}
.cell__stack{
  margin-top:auto;
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--fg-mute);
}

/* ── karty práce v rezacích značkách (003) ────────────── */
.work{display:grid;gap:28px}
@media (min-width:700px){.work{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.work{grid-template-columns:repeat(3,1fr)}}

.work__item{display:flex;flex-direction:column;gap:14px}
.work__slot{
  position:relative;aspect-ratio:4/3;
  border-color:var(--ink-30);
  background-image:
    linear-gradient(rgba(19,20,23,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(19,20,23,.06) 1px,transparent 1px);
  background-size:16px 16px;
  overflow:hidden;
}
.work__slot img{width:100%;height:100%;object-fit:cover;display:block}
.work__head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.work__head .h4{font-size:18px}
.work__year{
  font-family:var(--mono);font-size:10px;letter-spacing:.08em;
  color:var(--fg-mute);flex:none;
}
.work__d{font-size:13.5px;line-height:1.55;color:var(--fg-soft);margin-top:-6px}
.work__tag{
  font-family:var(--mono);font-size:10px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal);
}
.work__item:hover .h4{color:var(--signal)}

/* odkaz v pravom hornom rohu anotácie sekcie */
a.meta__fig{transition:color var(--t-micro) var(--ease)}
a.meta__fig:hover{color:var(--signal)}

/* ── prepínač jazyka ───────────────────────────────────── */
.nav__end{display:flex;align-items:center;gap:12px}
.lang{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.lang__sep{color:var(--ink-30)}
.lang a{color:var(--ink-45);transition:color var(--t-micro) var(--ease)}
.lang a:hover{color:var(--signal)}
.lang a[aria-current="true"]{color:var(--fg);font-weight:600}
.band--ink .lang a{color:var(--pap-45)}
.band--ink .lang a[aria-current="true"]{color:var(--paper)}

/* kroky postupu v rytme veľkých čísel (2 px linka hore) */
.figures--steps li{gap:12px}
.figures--steps .h4{margin:0}
.figures--steps p{font-size:13.5px;line-height:1.6;color:var(--fg-soft)}

/* prázdne portfólio nemá čo ukázať — sekcia zmizne */
#praca:has([data-prazdny]){display:none}

/* Anglické nadpisy sú dlhšie ako slovenské — 16ch meraných na slovenčinu
   by ich lámalo na štyri riadky. 900 px je šírka z návrhu. */
.h1--en{max-width:900px}
.h1--en.h1--sm{max-width:760px}

/* ── služby: disciplína s výstupmi a orientačnou cenou ── */
.svc .tags{margin-top:2px}
.rules .svc__price{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--signal);
}