@charset "UTF-8";
/* ==========================================================================
   TERRAFIX s.r.o. — dizajnový systém
   Oxidovaná hlina na atramente. Desktop-first.
   --------------------------------------------------------------------------
   00  Tokeny
   01  Reset
   02  Typografia
   03  Zrno + kurzor + preloader
   04  Layout / mriežka
   05  Média (duotón)
   06  Tlačidlá a odkazy
   07  Hlavička + navigácia
   08  Reveal animácie
   09  Hero
   10  Bežiaci pás
   11  Sekcie domovskej stránky
   12  Služby
   13  Referencie
   14  Tím
   15  Kariéra
   16  Formuláre / kontakt
   17  Pätička
   18  Vnútorné stránky
   ========================================================================== */

/* ── 00  TOKENY ─────────────────────────────────────────────────────────── */
:root{
  /* farby */
  --ink:        #0A0908;
  --ink-2:      #0D0B0A;
  --surface:    #14110F;
  --surface-2:  #1B1613;
  --surface-3:  #241D19;
  --bone:       #EFE9E3;
  --bone-dim:   #C8C0B7;
  --grey:       #8B827A;
  --grey-dk:    #5A534D;
  --clay:       #B4674A;
  --clay-lt:    #CC7F5E;
  --clay-dk:    #7C4530;
  --line:       rgba(239,233,227,.085);
  --line-2:     rgba(239,233,227,.16);
  --line-3:     rgba(239,233,227,.28);

  /* písmo — web vystačí s dvoma rodinami.
     Technické popisky, indexy a číselné údaje nesie ten istý Archivo,
     len v strednom reze s väčším prestrkom; --mono ostáva ako názov roly. */
  --sans:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --mono:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono-vf: 'wdth' 100,'wght' 500;

  /* rytmus */
  --pad:   clamp(32px, 3.6vw, 64px);
  --max:   1600px;
  --gap:   32px;

  /* pohyb */
  --e-out:  cubic-bezier(.22,1,.36,1);
  --e-io:   cubic-bezier(.65,0,.35,1);
  --e-soft: cubic-bezier(.33,1,.68,1);
}

/* ── 01  RESET ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  scroll-behavior:auto;
  background:var(--ink);
}
body{
  font-family:var(--sans);
  font-variation-settings:'wdth' 100,'wght' 400;
  font-size:1rem;
  line-height:1.72;
  color:var(--grey);
  background:var(--ink);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
img,svg,video{display:block;max-width:100%}
img{border:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0;outline:0}
button{cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--clay);color:var(--ink)}

/* vlastný scrollbar */
::-webkit-scrollbar{width:9px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#2A2320;border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--clay-dk)}

/* plynulý scroll — obsah posúva JS */
html.smooth #scroll{position:fixed;top:0;left:0;width:100%;will-change:transform;z-index:1}
html.smooth body{overflow:visible}

/* ── 02  TYPOGRAFIA ─────────────────────────────────────────────────────── */
h1,h2,h3,h4,h5{
  font-family:var(--sans);
  color:var(--bone);
  font-weight:400;
  letter-spacing:-.035em;
  line-height:.94;
}
.d1{font-size:clamp(58px,7.6vw,124px);font-variation-settings:'wdth' 104,'wght' 480;line-height:.9;letter-spacing:-.046em}
.d2{font-size:clamp(46px,5.6vw,92px);font-variation-settings:'wdth' 103,'wght' 470;line-height:.92;letter-spacing:-.042em}
.d3{font-size:clamp(32px,3.2vw,54px);font-variation-settings:'wdth' 102,'wght' 480;line-height:1.02;letter-spacing:-.034em}
.d4{font-size:clamp(24px,1.95vw,33px);font-variation-settings:'wdth' 100,'wght' 500;line-height:1.16;letter-spacing:-.026em}
.d5{font-size:20px;font-variation-settings:'wdth' 100,'wght' 500;line-height:1.32;letter-spacing:-.018em}

.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.01em}
.serif-i{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.005em}
.clay{color:var(--clay)}
.bone{color:var(--bone)}

.mono{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);
  font-size:11px;
  letter-spacing:.1em;
  line-height:1.4;
}
.eyebrow{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);
  font-size:11px;
  letter-spacing:.11em;
  color:var(--clay);
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:'';
  width:34px;height:1px;
  background:var(--clay);
  opacity:.6;
  flex:none;
}
.eyebrow.no-rule::before{display:none}

.lead{font-size:21px;line-height:1.58;color:var(--bone-dim);letter-spacing:-.012em}
.body-lg{font-size:17px;line-height:1.75}
p{max-width:74ch}
p + p{margin-top:1.15em}

.rule{height:1px;background:var(--line);border:0;width:100%}

/* ── 03  ZRNO / KURZOR / PRELOADER ──────────────────────────────────────── */
.grain{
  position:fixed;inset:-150%;
  z-index:9995;pointer-events:none;
  opacity:.32;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grain 6s steps(8) infinite;
  mix-blend-mode:overlay;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-3%,-4%)}
  20%{transform:translate(-8%,3%)}
  30%{transform:translate(4%,-6%)}
  40%{transform:translate(-3%,7%)}
  50%{transform:translate(-6%,3%)}
  60%{transform:translate(6%,0)}
  70%{transform:translate(0,6%)}
  80%{transform:translate(2%,10%)}
  90%{transform:translate(-5%,3%)}
}

/* vinetácia */
.vignette{
  position:fixed;inset:0;z-index:9994;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 40%,transparent 40%,rgba(0,0,0,.42) 100%);
}

/* kurzor */
.cur{position:fixed;top:0;left:0;z-index:9999;pointer-events:none}
.cur-dot{
  position:fixed;top:0;left:0;width:6px;height:6px;border-radius:50%;
  background:var(--bone);
  transform:translate(-50%,-50%);
  transition:width .3s var(--e-out),height .3s var(--e-out),opacity .3s;
}
.cur-ring{
  position:fixed;top:0;left:0;width:38px;height:38px;border-radius:50%;
  border:1px solid rgba(239,233,227,.55);
  transform:translate(-50%,-50%);
  transition:width .4s var(--e-out),height .4s var(--e-out),
             border-color .4s,opacity .3s,background-color .4s;
  display:grid;place-items:center;
}
.cur-label{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9px;letter-spacing:.09em;  color:var(--ink);opacity:0;transition:opacity .25s;white-space:nowrap;
}
body.cur-link .cur-ring{width:60px;height:60px;border-color:var(--clay);background:rgba(180,103,74,.14)}
body.cur-link .cur-dot{width:0;height:0}
body.cur-view .cur-ring{width:92px;height:92px;background:var(--clay);border-color:var(--clay)}
body.cur-view .cur-dot{width:0;height:0}
body.cur-view .cur-label{opacity:1}
body.cur-hide .cur-dot,body.cur-hide .cur-ring{opacity:0}
@media (hover:none){.cur{display:none}}

/* preloader */
.pre{
  position:fixed;inset:0;z-index:9990;
  background:var(--ink);
  display:grid;place-items:center;
  overflow:hidden;
}
.pre-inner{text-align:center;position:relative;z-index:2}
.pre-mark{
  font-family:var(--sans);
  font-variation-settings:'wdth' 108,'wght' 500;
  font-size:clamp(38px,5vw,76px);
  letter-spacing:.12em;
  color:var(--bone);
  overflow:hidden;
  display:flex;justify-content:center;
  padding-left:.22em;
}
.pre-mark span{
  display:inline-block;
  transform:translateY(105%);
  animation:preUp .9s var(--e-out) forwards;
}
@keyframes preUp{to{transform:translateY(0)}}
.pre-sub{
  margin-top:20px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.18em;  color:var(--grey);
  opacity:0;animation:fadeIn .7s .35s forwards;
}
@keyframes fadeIn{to{opacity:1}}
.pre-count{
  position:absolute;right:var(--pad);bottom:calc(var(--pad) - 12px);
  font-family:var(--sans);
  font-variation-settings:'wdth' 100,'wght' 430;
  font-size:clamp(48px,7vw,112px);
  letter-spacing:-.05em;
  color:var(--surface-3);
  line-height:1;
}
.pre-bar{
  position:absolute;left:var(--pad);right:var(--pad);bottom:var(--pad);
  height:1px;background:var(--line);
}
.pre-bar i{display:block;height:100%;width:0;background:var(--clay)}
.pre.done{
  transform:translateY(-100%);
  transition:transform 1.05s var(--e-io);
}

/* prechod medzi stránkami
   .cover — nová stránka sa načíta zakrytá (bez prechodu)
   .in    — odchod: záclona nabehne zdola nahor
   .out   — príchod: záclona odíde ďalej nahor a odkryje stránku */
.curtain{
  position:fixed;inset:0;z-index:9989;background:var(--ink);
  transform:translateY(100%);pointer-events:none;
}
.curtain.cover{transform:translateY(0)}
.curtain.in{transform:translateY(0);transition:transform .62s var(--e-io)}
.curtain.out{transform:translateY(-100%);transition:transform .78s var(--e-out)}

/* ── 04  LAYOUT ─────────────────────────────────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.wrap-wide{width:100%;padding:0 var(--pad)}
.sec{padding:clamp(90px,9vw,170px) 0;position:relative}
.sec-sm{padding:clamp(64px,6vw,110px) 0}
.pt-0{padding-top:0}
.sec-hair{border-top:1px solid var(--line)}

.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
/* šírku nastavujeme cez -end, aby sa dala kombinovať so .startN;
   `grid-column:span N` by prepísalo aj -start a bunka by sa zúžila na 1 stĺpec */
.c1{grid-column-end:span 1}.c2{grid-column-end:span 2}.c3{grid-column-end:span 3}
.c4{grid-column-end:span 4}.c5{grid-column-end:span 5}.c6{grid-column-end:span 6}
.c7{grid-column-end:span 7}.c8{grid-column-end:span 8}.c9{grid-column-end:span 9}
.c10{grid-column-end:span 10}.c11{grid-column-end:span 11}.c12{grid-column-end:span 12}
.start2{grid-column-start:2}.start3{grid-column-start:3}
.start4{grid-column-start:4}.start5{grid-column-start:5}
.start6{grid-column-start:6}.start7{grid-column-start:7}

.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:64px;margin-bottom:clamp(48px,5vw,86px)}
.sec-head .eyebrow{margin-bottom:26px}
/* pozn.: `ch` sa tu počíta zo zdedených 16 px, nie z veľkosti nadpisu — preto px */
.sec-head-txt{flex:1 1 auto;min-width:0;max-width:min(940px,64%)}

.stack-sm > * + *{margin-top:14px}
.stack   > * + *{margin-top:24px}
.stack-lg> * + *{margin-top:44px}

/* ── 05  MÉDIÁ (duotón) ─────────────────────────────────────────────────── */
.media{
  position:relative;overflow:hidden;
  background:var(--surface);
  isolation:isolate;
}
/* Rámy s parallaxom si držia vlastnú kompozitnú vrstvu. Bez nej mobilné
   prehliadače prekresľujú duotónový blend pri každom rámci nanovo a záber
   počas dekódovania fotky preblikáva. */
[data-para]{will-change:transform;backface-visibility:hidden}
.media img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) brightness(.70) contrast(1.16);
  transition:transform 1.4s var(--e-soft),filter .9s var(--e-soft);
  transform:scale(1.001);
}
.media::before{
  content:'';position:absolute;inset:0;z-index:2;
  background:var(--clay);mix-blend-mode:color;opacity:.34;
  transition:opacity .9s var(--e-soft);
  pointer-events:none;
}
.media::after{
  content:'';position:absolute;inset:0;z-index:3;
  background:linear-gradient(178deg,rgba(10,9,8,.24) 0%,rgba(10,9,8,0) 34%,rgba(10,9,8,.62) 100%);
  pointer-events:none;
}
.media-hov:hover img,a:hover .media img,.card:hover .media img{
  transform:scale(1.055);
  filter:grayscale(.28) brightness(.86) contrast(1.06);
}
.media-hov:hover::before,a:hover .media::before,.card:hover .media::before{opacity:.15}

.media-flat::after{display:none}
.media-plain::before{opacity:.2}

.ratio-16-9{aspect-ratio:16/9}
.ratio-4-3 {aspect-ratio:4/3}
.ratio-3-2 {aspect-ratio:3/2}
.ratio-1-1 {aspect-ratio:1/1}
.ratio-3-4 {aspect-ratio:3/4}
.ratio-2-3 {aspect-ratio:2/3}
.ratio-21-9{aspect-ratio:21/9}

.para-wrap{overflow:hidden;position:relative}
.para-wrap img{transform:scale(1.22)}

/* Široký pás so záberom, ktorý pri scrollovaní zaostáva za stránkou.
   Presah hore aj dole je zásoba, z ktorej si posun berie — keď sa minie,
   spod fotky sa odhalí pozadie. Presah rátaný len z výšky rámu je na
   telefóne pár desiatok pixelov (21:9 pás je tam vysoký ~140 px), zatiaľ
   čo dráha parallaxu vychádza z výšky okna a ostáva veľká. min() preto
   vždy vyberie väčšiu z dvoch zásob: percento na širokých plochách,
   pevných 96 px na úzkych. Amplitúdu posunu si main.js odvodzuje priamo
   z tejto zásoby, takže väčší presah = dlhšia plynulá dráha (a väčší
   orez záberu, čo je pri parallaxe prijateľná cena). */
.para-band{aspect-ratio:21/9}
.para-band > .media{position:absolute;inset:min(-20%,-96px) 0}

/* ── 06  TLAČIDLÁ ───────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;
  padding:19px 34px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.1em;  color:var(--bone);
  border:1px solid var(--line-2);
  background:transparent;
  overflow:hidden;
  transition:color .45s var(--e-out),border-color .45s var(--e-out);
}
.btn span{position:relative;z-index:2}
.btn::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:var(--clay);
  transform:translateY(101%);
  transition:transform .5s var(--e-out);
}
.btn:hover{color:var(--ink);border-color:var(--clay)}
.btn:hover::before{transform:translateY(0)}
.btn-fill{background:var(--clay);border-color:var(--clay);color:var(--ink)}
.btn-fill::before{background:var(--bone)}
.btn-fill:hover{color:var(--ink);border-color:var(--bone)}
.btn .arw{transition:transform .45s var(--e-out)}
.btn:hover .arw{transform:translateX(5px)}

/* textový odkaz s podčiarknutím */
.tlink{
  position:relative;display:inline-flex;align-items:center;gap:11px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.1em;  color:var(--bone);padding-bottom:7px;
}
.tlink::after{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--line-3);
  transform-origin:right;transform:scaleX(1);
  transition:transform .45s var(--e-out);
}
.tlink::before{
  content:'';position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--clay);
  transform-origin:left;transform:scaleX(0);
  transition:transform .45s .08s var(--e-out);
  z-index:2;
}
.tlink:hover{color:var(--clay)}
.tlink:hover::after{transform:scaleX(0)}
.tlink:hover::before{transform:scaleX(1)}
.tlink .arw{transition:transform .45s var(--e-out)}
.tlink:hover .arw{transform:translateX(5px)}

.arw{display:inline-block;line-height:1}

/* ── 07  HLAVIČKA ───────────────────────────────────────────────────────── */
/* hlavička nemá vlastné pozadie a nikdy sa nehýbe (žiadne zmršťovanie ani
   skrývanie pri scrolle) — značka a burger sa namiesto toho miešajú s tým,
   čo je pod nimi (mix-blend-mode:difference), takže zostávajú čitateľné
   na tmavej ploche aj na svetlejšej fotke bez podkladu */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:900;
}
.head-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  height:88px;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
  position:relative;z-index:2;
}

/* značka — písmená sa pri prejdení myšou zvlnia zľava doprava */
.brand{display:flex;align-items:center;flex:none;padding:6px 0}
.brand-txt{
  display:flex;
  font-variation-settings:'wdth' 108,'wght' 550;
  font-size:19px;letter-spacing:.2em;color:var(--bone);line-height:1;
  padding-left:.2em;
  mix-blend-mode:difference;
}
.brand-txt i{
  display:block;font-style:normal;
  transition:transform .5s var(--e-out),color .5s var(--e-out);
  transition-delay:calc(var(--i) * 26ms);
}
.brand:hover .brand-txt i{transform:translateY(-3px);color:var(--clay)}

/* burger — dve línie sa pri otvorení spoja do krížika. Ikona stojí sama,
   bez slovného popisku, na každej šírke obrazovky.
   Línie sú rozložené flexboxom (nie top/bottom na necelé px), nech majú
   vždy rovnakú hrúbku a nekmitajú pri prekreslení. */
.burger{
  display:flex;align-items:center;flex:none;
  padding:12px 0 12px 16px;
}
.burger-box{
  position:relative;width:26px;height:14px;flex:none;
  display:flex;flex-direction:column;justify-content:space-between;
  mix-blend-mode:difference;
}
.burger-ln{
  height:2px;background:var(--bone-dim);
  transition:transform .5s var(--e-io),background-color .35s;
}
.burger:hover .burger-ln{background:var(--bone)}
.burger.open .burger-ln{background:var(--clay)}
.burger.open .burger-ln:first-child{transform:translateY(6px) rotate(40deg)}
.burger.open .burger-ln:last-child{transform:translateY(-6px) rotate(-40deg)}

/* panel navigácie — namiesto vodorovného menu sa po kliku na burger
   spustí ako roleta zhora nadol (rovnaká maska ako pri odkrývaní záberov),
   odkazy aj činnosti sa pod ňou nabaľujú s malým oneskorením za sebou */
.nav-panel{
  position:fixed;left:0;right:0;top:0;
  padding-top:88px;
  background:rgba(10,9,8,.97);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-bottom:1px solid var(--line);
  clip-path:inset(0 0 100% 0);
  visibility:hidden;
  transition:clip-path .68s var(--e-io),visibility 0s .68s;
  z-index:1;
}
.nav-panel.open{
  clip-path:inset(0 0 0 0);
  visibility:visible;
  transition:clip-path .68s var(--e-io),visibility 0s;
}
.nav-panel-in{
  max-width:var(--max);margin:0 auto;padding:52px var(--pad) 56px;
  display:grid;grid-template-columns:1fr 1fr 340px;gap:56px;
}

.pri-col{display:grid;grid-template-columns:1fr;gap:2px;align-content:start}
.pri-link{
  display:flex;align-items:baseline;gap:18px;
  padding:14px 6px 14px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--e-out),border-color .45s;
}
.pri-link:hover{padding-left:8px;border-bottom-color:var(--line-2)}
.pri-link .pi{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.06em;
  color:var(--grey-dk);flex:none;padding-top:.5em;transition:color .35s;
}
.pri-link:hover .pi,.pri-link.is-active .pi{color:var(--clay)}
.pri-link .pt{
  overflow:hidden;display:inline-block;
  font-size:clamp(24px,2.35vw,32px);letter-spacing:-.03em;color:var(--bone-dim);
}
.pri-link .pt i{
  display:inline-block;font-style:normal;
  font-variation-settings:'wdth' 102,'wght' 460;
  transform:translateY(112%);
  transition:transform .7s var(--e-out),color .35s;
  transition-delay:calc(var(--i) * 55ms);
}
.nav-panel.open .pri-link .pt i{transform:translateY(0)}
.pri-link:hover .pt i,.pri-link.is-active .pt i{color:var(--bone)}

.mega-col{display:grid;grid-template-columns:1fr;gap:2px;align-content:start}
.mega-col .mct{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.1em;
  color:var(--grey-dk);margin-bottom:16px;
}
.mega-link{
  display:flex;align-items:baseline;gap:16px;
  padding:12px 18px 12px 0;
  border-bottom:1px solid var(--line);
  transition:padding-left .45s var(--e-out),border-color .45s;
}
.mega-link:hover{padding-left:6px;border-bottom-color:var(--line-2)}
.mega-link .mi{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;color:var(--clay);flex:none;letter-spacing:.06em}
.mega-link .mt{
  display:inline-block;overflow:hidden;vertical-align:top;
  font-size:17px;letter-spacing:-.02em;color:var(--bone-dim);
}
.mega-link .mt i{
  display:inline-block;font-style:normal;
  font-variation-settings:'wdth' 100,'wght' 470;
  transform:translateY(112%);
  transition:transform .7s var(--e-out),color .35s;
  transition-delay:calc(var(--i) * 55ms);
}
.nav-panel.open .mega-link .mt i{transform:translateY(0)}
.mega-link:hover .mt i{color:var(--bone)}
.mega-link .md{font-size:12.5px;color:var(--grey-dk);margin-left:auto;text-align:right;max-width:19ch;line-height:1.4}
.mega-aside{
  border-left:1px solid var(--line);padding-left:36px;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s var(--e-out),transform .8s var(--e-out);
  transition-delay:.4s;
}
.nav-panel.open .mega-aside{opacity:1;transform:none}
.mega-aside .media{aspect-ratio:4/3;margin-bottom:22px}

/* ── 08  REVEAL ─────────────────────────────────────────────────────────── */
[data-rev]{opacity:0}
[data-rev].is-in{opacity:1}

/* fade + rise */
[data-rev="up"]{transform:translateY(34px);transition:opacity 1s var(--e-out),transform 1.1s var(--e-out)}
[data-rev="up"].is-in{transform:none}

/* clip mask — záber sa odkryje a zároveň dosadne z mierneho priblíženia */
[data-rev="mask"]{clip-path:inset(0 100% 0 0);opacity:1;transition:clip-path 1.15s var(--e-out)}
[data-rev="mask"].is-in{clip-path:inset(0 0 0 0)}
[data-rev="mask-up"]{clip-path:inset(100% 0 0 0);opacity:1;transition:clip-path 1.25s var(--e-out)}
[data-rev="mask-up"].is-in{clip-path:inset(0 0 0 0)}
[data-rev="mask"] .media img,[data-rev="mask-up"] .media img{
  transform:scale(1.16);
  transition:transform 1.9s var(--e-out),filter 1.2s var(--e-soft);
}
[data-rev="mask"].is-in .media img,[data-rev="mask-up"].is-in .media img{transform:scale(1)}

/* riadok po slove */
[data-rev="words"]{opacity:1}
/* mäkčene hore, dĺžne dole — maska potrebuje priestor na oboch stranách */
[data-rev="words"] .ln{display:block;overflow:hidden;padding:.06em 0 .15em;margin:-.06em 0 -.15em}
[data-rev="words"] .w{display:inline-block;overflow:hidden;vertical-align:top}
[data-rev="words"] .w i{
  display:inline-block;font-style:inherit;
  transform:translateY(112%);
  transition:transform .95s var(--e-out);
  transition-delay:calc(var(--i) * 48ms);
}
[data-rev="words"].is-in .w i{transform:translateY(0)}

/* rozťahujúca sa linka */
[data-rev="line"]{opacity:1;transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e-io)}
[data-rev="line"].is-in{transform:scaleX(1)}

/* postupné deti */
[data-stagger] > *{opacity:0;transform:translateY(26px);
  transition:opacity .85s var(--e-out),transform .95s var(--e-out)}
[data-stagger].is-in > *{opacity:1;transform:none}
[data-stagger].is-in > *:nth-child(1){transition-delay:0ms}
[data-stagger].is-in > *:nth-child(2){transition-delay:80ms}
[data-stagger].is-in > *:nth-child(3){transition-delay:160ms}
[data-stagger].is-in > *:nth-child(4){transition-delay:240ms}
[data-stagger].is-in > *:nth-child(5){transition-delay:320ms}
[data-stagger].is-in > *:nth-child(6){transition-delay:400ms}
[data-stagger].is-in > *:nth-child(7){transition-delay:480ms}
[data-stagger].is-in > *:nth-child(8){transition-delay:560ms}
[data-stagger].is-in > *:nth-child(9){transition-delay:640ms}
[data-stagger].is-in > *:nth-child(10){transition-delay:720ms}
[data-stagger].is-in > *:nth-child(11){transition-delay:800ms}
[data-stagger].is-in > *:nth-child(12){transition-delay:880ms}

/* ── 09  HERO ───────────────────────────────────────────────────────────── */
.hero{position:relative;height:100vh;min-height:720px;overflow:hidden;display:flex;flex-direction:column}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* presah hore aj dole je zásoba pre parallax — záber sa pri scrollovaní
   posúva, okraje sa preto nesmú odhaliť */
.hero-bg .media{position:absolute;inset:-10% 0;clip-path:inset(0 0 100% 0)}
.hero-bg .media img{animation:kb 22s ease-out forwards}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1)}}
.loaded .hero-bg .media{clip-path:inset(0 0 0 0);transition:clip-path 1.5s .12s var(--e-io)}
.hero-bg::after{
  content:'';position:absolute;inset:-1px;z-index:4;
  background:linear-gradient(96deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.62) 42%,rgba(10,9,8,.28) 72%,rgba(10,9,8,.55) 100%);
}
.hero-in{
  position:relative;z-index:5;
  flex:1;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--max);width:100%;margin:0 auto;
  /* horné odsadenie = výška hlavičky; text tak sadne do optického
     stredu obrazovky, nie pod ňu */
  padding:88px var(--pad) clamp(56px,5vw,84px);
}
.hero-eyebrow{margin-bottom:28px}
.hero-h{margin-bottom:32px;max-width:16ch}
.hero-sub{max-width:52ch;margin-bottom:44px;color:var(--bone-dim);font-size:18px;line-height:1.6}
.hero-cta{display:flex;align-items:center;gap:26px}

.hero-side{
  position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);
  z-index:6;display:flex;flex-direction:column;align-items:flex-end;gap:20px;
}
.hero-side .vt{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.16em;  color:var(--grey-dk);
  writing-mode:vertical-rl;
}
.hero-side .vline{width:1px;height:78px;background:linear-gradient(180deg,var(--line-2),transparent)}

/* vnútorný hero */
/* Vlastné pozadie sekcie: spodná hrana záberu sa stráca do čiernej, takže
   tam nesmie byť nič iné než presne tá farba, na ktorej stmavenie končí. */
.phero{position:relative;background:var(--ink);padding-top:190px;padding-bottom:clamp(56px,5vw,92px);overflow:hidden}
/* Záber tu zámerne nemá parallax.
   Kým ho mal, držal si kvôli `will-change:transform` vlastnú kompozitnú
   vrstvu — orezával ho teda compositor, kým stmavenie v ::after sa
   vykresľovalo do vrstvy stránky. Výška sekcie vychádza na zlomok pixela
   (merané 396.76 px) a `#scroll` sa pri plynulom scrolle posúva tiež
   o zlomky, takže si tie dva orezy zaokrúhlili spodnú hranu každý inam
   a na styku s čiernou sekciou preblikol riadok neztmaveného záberu.
   Presah `inset:-1px` na to nestačí — `overflow:hidden` ho oreže na tú
   istú hranu, a maskovanie alfy tiež nie, lebo orezanie kompozitnej
   vrstvy prebieha mimo nej. Bez transformu je z toho jedna vrstva, záber
   aj stmavenie rastrujú spolu a hrana sa rozísť nemá ako. Domovský hero
   si parallax ponecháva: jeho gradient ide do strany a nikde nie je
   nepriehľadný, takže tam ten riadok nie je vidno. */
.phero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
.phero-bg .media{position:absolute;inset:0}
.phero-bg::after{
  content:'';position:absolute;inset:-1px;z-index:4;
  background:linear-gradient(180deg,rgba(10,9,8,.94) 0%,rgba(10,9,8,.72) 45%,var(--ink) 100%);
}
.phero-in{position:relative;z-index:5;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.crumbs{display:flex;align-items:center;gap:11px;margin-bottom:38px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--grey-dk)}
.crumbs a{transition:color .3s}
.crumbs a:hover{color:var(--clay)}
.crumbs .sep{opacity:.4}
.crumbs .cur-pg{color:var(--bone-dim)}

/* ── 10  BEŽIACI PÁS ────────────────────────────────────────────────────── */
.ticker{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:26px 0;background:var(--ink-2);
}
/* pás beží nepretržite — hover ho zámerne nezastavuje */
.ticker-track{display:flex;width:max-content;animation:tick 42s linear infinite}
.ticker-grp{display:flex;align-items:center;flex:none}
.ticker-grp span{
  font-variation-settings:'wdth' 104,'wght' 440;
  font-size:30px;letter-spacing:-.02em;color:var(--bone-dim);
  padding:0 30px;white-space:nowrap;
}
.ticker-grp i{color:var(--clay);font-size:13px;font-style:normal;transform:translateY(-4px)}
@keyframes tick{to{transform:translateX(-50%)}}

.ticker-lg .ticker-grp span{font-size:clamp(48px,5.6vw,92px);
  font-variation-settings:'wdth' 102,'wght' 460;letter-spacing:-.04em;padding:0 44px}

/* ── 11  SEKCIE DOMOVSKEJ ───────────────────────────────────────────────── */
/* manifest */
.manifest-h{max-width:19ch;margin-bottom:44px}
.manifest-accent{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(28px,2.6vw,44px);line-height:1.24;letter-spacing:-.014em;
  color:var(--clay-lt);
  max-width:22ch;
}
.manifest-side{display:flex;flex-direction:column;gap:30px;padding-top:9px}
.manifest-side .k{
  display:flex;justify-content:space-between;gap:18px;
  padding-bottom:15px;border-bottom:1px solid var(--line);
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10.5px;letter-spacing:.08em;}
.manifest-side .k b{color:var(--bone);font-weight:400}
.manifest-side .k span{color:var(--grey-dk)}

/* čísla */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)}
.stat{padding:46px 36px 42px;border-right:1px solid var(--line);position:relative}
.stat:first-child{padding-left:0}
.stat:last-child{border-right:0;padding-right:0}
.stat b{
  display:block;
  font-variation-settings:'wdth' 99,'wght' 400;
  font-size:clamp(50px,5.4vw,86px);letter-spacing:-.055em;color:var(--bone);
  line-height:.92;margin-bottom:18px;
}
.stat b em{font-style:normal;color:var(--clay);font-size:.5em;vertical-align:top;line-height:1;margin-left:.05em}
.stat .sl{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10.5px;letter-spacing:.09em;  color:var(--bone-dim);margin-bottom:9px;
}
.stat .sd{font-size:13px;color:var(--grey-dk);line-height:1.5}

/* hodnoty */
.values{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line)}
.value{padding:44px 34px 46px;border-right:1px solid var(--line);transition:background-color .5s var(--e-out)}
.value:last-child{border-right:0}
.value:hover{background:rgba(255,255,255,.018)}
.value-ic{width:34px;height:34px;margin-bottom:34px}
.value-ic path,.value-ic circle,.value-ic line,.value-ic rect,.value-ic polyline{
  stroke:var(--clay);stroke-width:1.1;fill:none;stroke-linecap:square
}
.value h3{font-size:21px;font-variation-settings:'wdth' 100,'wght' 500;letter-spacing:-.022em;margin-bottom:15px;line-height:1.2}
.value p{font-size:14.5px;line-height:1.68;color:var(--grey)}

/* citát */
.quote{position:relative;overflow:hidden;padding:clamp(120px,12vw,200px) 0}
.quote-bg{position:absolute;inset:0;z-index:0}
.quote-bg .media{position:absolute;inset:0}
.quote-bg::after{content:'';position:absolute;inset:0;background:rgba(10,9,8,.66);z-index:5}
.quote-in{position:relative;z-index:6;max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.quote-mark{font-family:var(--serif);font-size:130px;line-height:.5;color:var(--clay);opacity:.55;margin-bottom:34px;display:block}
.quote-txt{
  font-family:var(--serif);font-size:clamp(32px,3.9vw,64px);line-height:1.18;letter-spacing:-.02em;
  color:var(--bone);max-width:26ch;
}
.quote-by{margin-top:46px;display:flex;align-items:center;gap:18px}
.quote-by .qline{width:52px;height:1px;background:var(--clay)}
.quote-by .qn{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.09em;color:var(--bone-dim)}
.quote-by .qr{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.08em;color:var(--grey);line-height:2}

/* proces */
.proc{position:relative}
.proc-line{position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.proc-line i{display:block;height:100%;width:0;background:var(--clay);transition:width .1s linear}
.proc-grid{display:grid;grid-template-columns:repeat(5,1fr)}
.proc-step{padding:44px 30px 0;border-right:1px solid var(--line);position:relative}
.proc-step:first-child{padding-left:0}
.proc-step:last-child{border-right:0;padding-right:0}
.proc-step::before{
  content:'';position:absolute;top:-3px;left:0;width:5px;height:5px;
  background:var(--surface-3);border-radius:50%;transition:background-color .5s;
}
.proc-step.on::before{background:var(--clay)}
.proc-num{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.1em;color:var(--clay);
  margin-bottom:26px;display:block;
}
.proc-step h3{font-size:20px;font-variation-settings:'wdth' 100,'wght' 500;letter-spacing:-.022em;margin-bottom:15px;line-height:1.22}
.proc-step p{font-size:14px;line-height:1.68}

/* CTA */
.cta{position:relative;padding:clamp(110px,11vw,190px) 0;overflow:hidden;border-top:1px solid var(--line)}
/* jemná betónová textúra, aby sekcia nebola len plochá čierna */
.cta::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/tex/tex-02.jpg) center/cover no-repeat;
  filter:grayscale(1) brightness(.42) contrast(1.25);
  opacity:.22;mix-blend-mode:luminosity;
}
.cta::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(80% 120% at 20% 50%,transparent,rgba(10,9,8,.75));
}
.cta > .wrap{position:relative;z-index:2}
.cta-h{font-size:clamp(46px,6.4vw,110px);max-width:16ch;margin-bottom:56px}
.cta-row{display:flex;align-items:flex-end;justify-content:space-between;gap:64px;flex-wrap:wrap}
.cta-contacts{display:flex;gap:56px}
.cta-contacts .cc{display:flex;flex-direction:column;gap:9px}
.cta-contacts .cc span{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.11em;color:var(--grey-dk)}
.cta-contacts .cc a{font-size:18px;color:var(--bone);letter-spacing:-.015em;transition:color .35s}
.cta-contacts .cc a:hover{color:var(--clay)}

/* ── 12  SLUŽBY ─────────────────────────────────────────────────────────── */
.svc-list{position:relative;border-top:1px solid var(--line-2)}
.svc-row{
  display:grid;grid-template-columns:88px minmax(220px,1.05fr) 1.5fr 60px;
  align-items:center;gap:30px;
  padding:38px 0;
  border-bottom:1px solid var(--line);
  position:relative;
  transition:opacity .5s var(--e-out),padding-left .6s var(--e-out);
}
.svc-list:hover .svc-row{opacity:.32}
.svc-list .svc-row:hover{opacity:1;padding-left:10px}
.svc-row::before{
  content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;
  background:var(--clay);transform:scaleX(0);transform-origin:left;
  transition:transform .7s var(--e-out);
}
.svc-row:hover::before{transform:scaleX(1)}
.svc-idx{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.09em;color:var(--clay)}
.svc-name{
  font-variation-settings:'wdth' 101,'wght' 470;
  font-size:clamp(28px,2.7vw,44px);letter-spacing:-.034em;color:var(--bone);line-height:1.04;
}
.svc-tag{
  display:block;margin-top:9px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.1em;color:var(--grey-dk);
}
.svc-desc{font-size:14.5px;line-height:1.66;color:var(--grey);max-width:46ch}
.svc-go{
  width:44px;height:44px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;justify-self:end;color:var(--bone-dim);
  transition:background-color .45s var(--e-out),color .45s,border-color .45s,transform .45s var(--e-out);
}
.svc-row:hover .svc-go{background:var(--clay);border-color:var(--clay);color:var(--ink);transform:rotate(-45deg)}

/* karty služieb (podstránka) */
.svc-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
.svc-card{background:var(--ink);padding:0;position:relative;overflow:hidden;display:block}
.svc-card .media{aspect-ratio:4/3}
.svc-card-body{padding:34px 32px 40px}
.svc-card .sc-i{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.1em;color:var(--clay);display:block;margin-bottom:20px}
.svc-card h3{font-size:26px;font-variation-settings:'wdth' 100,'wght' 500;letter-spacing:-.028em;margin-bottom:14px}
.svc-card p{font-size:14px;line-height:1.66;margin-bottom:26px}
.svc-card .sc-go{
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.1em;  color:var(--grey-dk);display:flex;align-items:center;gap:9px;transition:color .4s,gap .4s
}
.svc-card:hover .sc-go{color:var(--clay);gap:15px}

/* tabuľka parametrov */
.specs{display:grid;grid-template-columns:1fr 1fr;gap:0 44px}
.specs-1{grid-template-columns:1fr}
.spec{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:17px 0;border-bottom:1px solid var(--line);
}
.spec dt{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--grey-dk);flex:none}
.spec dd{font-size:15px;color:var(--bone);text-align:right;letter-spacing:-.01em}

/* zoznam s odrážkami */
.tlist{margin-top:24px}
.tlist li{
  position:relative;padding:14px 0 14px 34px;
  border-bottom:1px solid var(--line);
  font-size:15px;line-height:1.6;color:var(--bone-dim);
}
.tlist li::before{
  content:'';position:absolute;left:0;top:24px;
  width:14px;height:1px;background:var(--clay);
}

/* kroky */
.steps{counter-reset:st}
.step{
  display:grid;grid-template-columns:80px 1fr 2fr;gap:34px;align-items:start;
  padding:30px 0;border-bottom:1px solid var(--line);
  transition:padding-left .55s var(--e-out),background-color .55s;
}
.step:hover{padding-left:8px;background:rgba(255,255,255,.016)}
.step-n{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.09em;color:var(--clay);padding-top:5px}
.step h4{font-size:21px;font-variation-settings:'wdth' 100,'wght' 480;letter-spacing:-.024em;line-height:1.2}
.step p{font-size:14.5px;line-height:1.7}

.note{
  border-left:2px solid var(--clay);
  padding:22px 0 22px 28px;
  background:linear-gradient(90deg,rgba(180,103,74,.07),transparent 70%);
}
.note .nt{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.11em;color:var(--clay);display:block;margin-bottom:12px}
.note p{font-size:15px;line-height:1.66;color:var(--bone-dim)}

/* ── 13  REFERENCIE ─────────────────────────────────────────────────────── */
/* horizontálna galéria */
.hgal{position:relative;overflow:hidden;cursor:grab}
.hgal.drag{cursor:grabbing}
.hgal-track{display:flex;gap:26px;padding:0 var(--pad);will-change:transform}
.hgal-item{flex:none;width:440px}
.hgal-item .media{aspect-ratio:4/5;margin-bottom:24px}
.hgal-meta{display:flex;justify-content:space-between;gap:18px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--grey-dk);
  padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.hgal-item h3{font-size:24px;font-variation-settings:'wdth' 100,'wght' 490;letter-spacing:-.028em;line-height:1.18;margin-bottom:11px;
  transition:color .4s}
.hgal-item:hover h3{color:var(--clay-lt)}
.hgal-item p{font-size:13.5px;line-height:1.6;color:var(--grey)}
.hgal-nav{display:flex;gap:11px}
.hnav{
  width:50px;height:50px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;color:var(--bone-dim);
  transition:background-color .4s,color .4s,border-color .4s,opacity .4s;
}
.hnav:hover{background:var(--clay);border-color:var(--clay);color:var(--ink)}
.hnav[disabled]{opacity:.25;pointer-events:none}
.hgal-bar{height:1px;background:var(--line);margin-top:52px;position:relative}
.hgal-bar i{position:absolute;left:0;top:0;height:1px;background:var(--clay);width:22%}

/* filtre */
.filters{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.filter{
  padding:11px 21px;border:1px solid var(--line);
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;  color:var(--grey);transition:color .35s,border-color .35s,background-color .35s;
}
.filter:hover{color:var(--bone);border-color:var(--line-2)}
.filter.on{background:var(--clay);border-color:var(--clay);color:var(--ink)}

/* mriežka projektov */
.pgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap) var(--gap);row-gap:74px}
.pcard{grid-column:span 6;display:block;position:relative}
.pcard.wide{grid-column:span 12}
.pcard.tall{grid-column:span 5}
.pcard.narrow{grid-column:span 7}
.pcard .media{aspect-ratio:16/11;margin-bottom:26px}
.pcard.wide .media{aspect-ratio:21/9}
.pcard-top{display:flex;justify-content:space-between;gap:20px;padding-bottom:15px;border-bottom:1px solid var(--line);margin-bottom:19px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--grey-dk)}
.pcard-top .pc-cat{color:var(--clay)}
.pcard h3{font-size:clamp(23px,1.9vw,31px);font-variation-settings:'wdth' 100,'wght' 480;letter-spacing:-.03em;
  line-height:1.14;margin-bottom:13px;transition:color .4s}
.pcard:hover h3{color:var(--clay-lt)}
.pcard .pc-sub{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.08em;color:var(--grey-dk);margin-bottom:15px}
.pcard p{font-size:14px;line-height:1.66;max-width:56ch}
.pcard-tech{display:flex;gap:7px;flex-wrap:wrap;margin-top:22px}
.chip{
  padding:7px 14px;border:1px solid var(--line);
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9px;letter-spacing:.08em;color:var(--grey);
}
.pcard.hidden{display:none}

/* detail projektu */
.pd-facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.pd-fact{padding:34px 30px;border-right:1px solid var(--line)}
.pd-fact:first-child{padding-left:0}
.pd-fact:last-child{border-right:0}
.pd-fact b{display:block;font-variation-settings:'wdth' 100,'wght' 430;font-size:32px;letter-spacing:-.04em;color:var(--bone);line-height:1;margin-bottom:12px}
.pd-fact span{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.09em;color:var(--grey-dk)}
.pd-meta{display:flex;flex-direction:column;gap:0}
.pd-meta .m{display:flex;justify-content:space-between;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}
.pd-meta .m dt{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--grey-dk)}
.pd-meta .m dd{font-size:14.5px;color:var(--bone);text-align:right}

.pnav{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.pnav a{padding:52px 0;transition:padding .55s var(--e-out)}
.pnav a:first-child{border-right:1px solid var(--line);padding-right:40px}
.pnav a:last-child{text-align:right;padding-left:40px}
.pnav a:first-child:hover{padding-left:7px}
.pnav a:last-child:hover{padding-right:7px}
.pnav .pn-l{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.1em;color:var(--clay);display:block;margin-bottom:16px}
.pnav .pn-t{font-size:26px;font-variation-settings:'wdth' 100,'wght' 480;letter-spacing:-.03em;color:var(--bone-dim);transition:color .4s;line-height:1.16}
.pnav a:hover .pn-t{color:var(--bone)}

/* ── 14  TÍM ────────────────────────────────────────────────────────────── */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);row-gap:56px}
.tmember .media{aspect-ratio:3/4;margin-bottom:22px}
.tmember h3{font-size:18px;font-variation-settings:'wdth' 100,'wght' 500;letter-spacing:-.02em;margin-bottom:8px;line-height:1.24}
.tmember .tm-role{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.09em;color:var(--clay);margin-bottom:17px}
.tmember .tm-contact{display:flex;flex-direction:column;align-items:flex-start;gap:5px;font-size:13px;color:var(--grey);padding-top:15px;border-top:1px solid var(--line)}
.tmember .tm-contact a{transition:color .3s}
.tmember .tm-contact a:hover{color:var(--bone)}

/* časová os */
.tline{position:relative;padding-left:44px}
.tline::before{content:'';position:absolute;left:0;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-item{position:relative;padding-bottom:52px}
.tl-item:last-child{padding-bottom:0}
.tl-item::before{
  content:'';position:absolute;left:-44px;top:9px;width:7px;height:7px;
  background:var(--clay);border-radius:50%;transform:translateX(-3px);
}
.tl-year{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:11px;letter-spacing:.1em;color:var(--clay);display:block;margin-bottom:13px}
.tl-item h4{font-size:20px;font-variation-settings:'wdth' 100,'wght' 490;letter-spacing:-.024em;margin-bottom:11px}
.tl-item p{font-size:14.5px;line-height:1.7}

/* ── 15  KARIÉRA ────────────────────────────────────────────────────────── */
.jobs{border-top:1px solid var(--line-2)}
.job{border-bottom:1px solid var(--line)}
.job-head{
  display:grid;grid-template-columns:1.4fr 1fr .8fr .8fr 52px;gap:26px;align-items:center;
  padding:34px 0;cursor:pointer;width:100%;text-align:left;
  transition:padding-left .55s var(--e-out);
}
.job.open .job-head,.job-head:hover{padding-left:9px}
.job-head h3{font-size:clamp(22px,1.85vw,30px);font-variation-settings:'wdth' 100,'wght' 470;letter-spacing:-.03em;color:var(--bone);line-height:1.14}
.job-m{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--grey-dk)}
.job-pay{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10px;letter-spacing:.09em;color:var(--clay)}
.job-tog{
  width:40px;height:40px;border:1px solid var(--line-2);border-radius:50%;
  display:grid;place-items:center;justify-self:end;position:relative;
  transition:background-color .45s,border-color .45s,transform .5s var(--e-out);
}
.job-tog::before,.job-tog::after{content:'';position:absolute;background:var(--bone-dim);transition:background-color .4s,transform .5s var(--e-out)}
.job-tog::before{width:11px;height:1px}
.job-tog::after{width:1px;height:11px}
.job.open .job-tog{background:var(--clay);border-color:var(--clay);transform:rotate(90deg)}
.job.open .job-tog::before,.job.open .job-tog::after{background:var(--ink)}
.job.open .job-tog::after{transform:scaleY(0)}
.job-body{max-height:0;overflow:hidden;transition:max-height .7s var(--e-io)}
.job-body-in{padding:8px 0 46px;display:grid;grid-template-columns:1.2fr 1fr;gap:64px}
.job-body p{font-size:15px;line-height:1.72;margin-bottom:26px}

/* ── 16  FORMULÁRE ──────────────────────────────────────────────────────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.field{position:relative;margin-bottom:34px}
.field.full{grid-column:span 2}
.field label{
  position:absolute;left:0;top:15px;
  font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:10.5px;letter-spacing:.09em;  color:var(--grey-dk);pointer-events:none;
  transition:transform .42s var(--e-out),color .42s,font-size .42s;
  transform-origin:left top;
}
.field input,.field textarea{
  width:100%;padding:15px 0 15px;
  border-bottom:1px solid var(--line-2);
  font-size:16.5px;color:var(--bone);letter-spacing:-.012em;
  background:transparent;
  transition:border-color .45s var(--e-out);
  resize:none;
}
.field textarea{min-height:120px;line-height:1.6}
.field input:focus,.field textarea:focus{border-bottom-color:var(--clay)}
.field.filled label,.field input:focus + label,.field textarea:focus + label{
  transform:translateY(-26px) scale(.86);color:var(--clay);
}
.field .req{color:var(--clay)}
.field.err input,.field.err textarea{border-bottom-color:#C4553F}
.field .msg{position:absolute;right:0;top:18px;font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9px;letter-spacing:.08em;color:#C4553F}

.form-foot{grid-column:span 2;display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:14px}
.consent{display:flex;align-items:flex-start;gap:13px;max-width:52ch;cursor:pointer}
.consent input{position:absolute;opacity:0;width:0;height:0}
.consent .box{
  width:16px;height:16px;border:1px solid var(--line-2);flex:none;margin-top:3px;
  display:grid;place-items:center;transition:background-color .3s,border-color .3s;
}
.consent .box svg{opacity:0;transition:opacity .25s;width:9px;height:9px}
.consent .box svg path{stroke:var(--ink);stroke-width:2;fill:none}
.consent input:checked + .box{background:var(--clay);border-color:var(--clay)}
.consent input:checked + .box svg{opacity:1}
.consent span.t{font-size:12.5px;line-height:1.6;color:var(--grey)}
.consent a{color:var(--bone-dim);text-decoration:underline;text-underline-offset:3px}

.alert{
  padding:22px 26px;border-left:2px solid var(--clay);
  background:rgba(180,103,74,.08);margin-bottom:44px;
}
.alert.ok{border-left-color:#6E8C5A;background:rgba(110,140,90,.09)}
.alert .at{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.11em;color:var(--clay);display:block;margin-bottom:10px}
.alert.ok .at{color:#8FB073}
.alert p{font-size:14.5px;color:var(--bone-dim)}

/* kontaktné bloky */
.cblocks{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-2)}
.cblock{padding:40px 34px 44px;border-right:1px solid var(--line)}
.cblock:first-child{padding-left:0}
.cblock:last-child{border-right:0;padding-right:0}
.cblock .cbt{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.11em;color:var(--clay);margin-bottom:24px}
.cblock a,.cblock p{font-size:16.5px;line-height:1.62;color:var(--bone-dim);display:block;letter-spacing:-.012em}
.cblock a{transition:color .35s}
.cblock a:hover{color:var(--clay)}
.cblock .cbs{font-size:13px;color:var(--grey-dk);margin-top:12px}

.map{position:relative;aspect-ratio:21/8;background:var(--surface);overflow:hidden;border:1px solid var(--line)}
/* svetlé dlaždice OSM prevrátime na tmavé a doladíme do hlinovej */
.map iframe{
  width:100%;height:100%;border:0;
  filter:grayscale(1) invert(1) brightness(1.04) contrast(.92)
         sepia(.5) hue-rotate(338deg) saturate(1.8);
}
.map-pin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);z-index:4;pointer-events:none;
}

/* FAQ */
.faq{border-top:1px solid var(--line-2)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  width:100%;text-align:left;padding:30px 0;
  font-size:clamp(18px,1.4vw,23px);font-variation-settings:'wdth' 100,'wght' 460;
  letter-spacing:-.024em;color:var(--bone-dim);line-height:1.3;
  transition:color .4s,padding-left .55s var(--e-out);
}
.faq-q:hover,.faq-item.open .faq-q{color:var(--bone);padding-left:7px}
.faq-ic{width:13px;height:13px;flex:none;position:relative}
.faq-ic::before,.faq-ic::after{content:'';position:absolute;background:var(--clay);transition:transform .5s var(--e-out)}
.faq-ic::before{width:13px;height:1px;top:6px;left:0}
.faq-ic::after{width:1px;height:13px;left:6px;top:0}
.faq-item.open .faq-ic::after{transform:scaleY(0)}
/* bežné ease-in-out — --e-io má príliš plochý rozbeh a otvorenie
   odpovede pôsobilo trhane */
.faq-a{max-height:0;overflow:hidden;transition:max-height .65s cubic-bezier(.42,0,.58,1)}
.faq-a p{padding:0 25% 34px 0;font-size:15px;line-height:1.75}

/* ── 17  PÄTIČKA ────────────────────────────────────────────────────────── */
.foot{border-top:1px solid var(--line);background:var(--ink-2);position:relative;overflow:hidden}
.foot::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(../img/tex/tex-06.jpg) center/cover no-repeat;
  filter:grayscale(1) brightness(.4) contrast(1.15);
  opacity:.16;mix-blend-mode:luminosity;
}
.foot > *{position:relative;z-index:1}
.foot-top{padding:clamp(66px,6vw,104px) 0 clamp(56px,5vw,84px)}
.foot-grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:56px}
.foot-t{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.12em;color:var(--grey-dk);margin-bottom:28px}
.foot-links li{margin-bottom:2px}
.foot-links a{
  display:inline-block;font-size:14.5px;color:var(--bone-dim);padding:5px 0;
  transition:color .35s,transform .45s var(--e-out);
}
.foot-links a:hover{color:var(--clay);transform:translateX(2.5px)}
.foot-co p{font-size:14.5px;line-height:1.8;color:var(--grey)}
.foot-co a{color:var(--bone-dim);transition:color .3s}
.foot-co a:hover{color:var(--clay)}
.foot-claim{font-family:var(--serif);font-style:italic;font-size:23px;line-height:1.4;color:var(--bone-dim);max-width:18em;margin-bottom:32px}

.foot-mark{
  position:relative;overflow:hidden;
  border-top:1px solid var(--line);
  padding:clamp(38px,4vw,64px) 0 0;
}
/* Účiara sadá presne na deliacu linku spodnej lišty.
   Archivo pri line-height:1 necháva pod účiarou .166em a nad verzálkami
   .147em prázdneho miesta — oboje odrežeme zápornými okrajmi, inak by
   značka buď visela nad linkou, alebo sa o ňu orezala.
   Veľkosť drží 17.5vw na každej šírke — pri tomto pomere sa osem verzálok
   zmestí do plochy s rovnakým okrajom po stranách. Spodná hranica clamp()
   je preto nízka: keby držala 90 px, pod ~515 px šírky by značka prerástla
   obrazovku a orezala sa. */
.foot-mark-txt{
  font-variation-settings:'wdth' 108,'wght' 480;
  font-size:clamp(46px,17.5vw,290px);
  letter-spacing:-.03em;
  line-height:1;
  margin-top:-.147em;
  margin-bottom:-.166em;
  color:var(--clay);
  text-align:center;
  white-space:nowrap;
  user-select:none;
}
/* spodná lišta — rovnaké písmo ako odkazy v pätičke nad ňou */
.foot-bar{
  border-top:1px solid var(--line);
  padding:26px 0;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
  font-family:var(--sans);font-size:14.5px;letter-spacing:-.008em;text-transform:none;
  color:var(--bone);
}
.foot-bar a{transition:color .3s}
.foot-bar a:hover{color:var(--clay)}
.foot-bar .fb-l,.foot-bar .fb-r{color:var(--grey)}
.foot-bar .fb-r a{color:var(--bone);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.foot-bar .dim{color:var(--bone-dim)}

/* ── 18  VNÚTORNÉ STRÁNKY ───────────────────────────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(48px,5vw,96px);align-items:start}
.split-7-5{display:grid;grid-template-columns:7fr 5fr;gap:clamp(48px,5vw,96px);align-items:start}
.split-5-7{display:grid;grid-template-columns:5fr 7fr;gap:clamp(48px,5vw,96px);align-items:start}
.sticky-col{position:sticky;top:130px}

.aside-nav{border-top:1px solid var(--line-2)}
.aside-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:17px 0;border-bottom:1px solid var(--line);
  font-size:15px;color:var(--grey);
  transition:color .35s,padding-left .5s var(--e-out);
}
.aside-nav a:hover{color:var(--bone);padding-left:6px}
.aside-nav a.on{color:var(--clay)}
.aside-nav a .an-i{font-family:var(--mono);font-variation-settings:var(--mono-vf);font-size:9.5px;letter-spacing:.08em;color:var(--grey-dk)}

.bigimg{position:relative;overflow:hidden;height:clamp(400px,52vw,720px)}
.bigimg .media{position:absolute;inset:0}

.two-img{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap);align-items:end}
.two-img .media:first-child{aspect-ratio:4/5}
.two-img .media:last-child{aspect-ratio:4/3}

/* utility */
.mb-0{margin-bottom:0}
.mt-xs{margin-top:14px}.mt-s{margin-top:26px}.mt-m{margin-top:44px}
.mt-l{margin-top:72px}.mt-xl{margin-top:clamp(64px,7vw,120px)}
.mb-s{margin-bottom:26px}.mb-m{margin-bottom:44px}.mb-l{margin-bottom:72px}
.mb-xl{margin-bottom:clamp(64px,7vw,120px)}
.tr{text-align:right}.tc{text-align:center}
.op6{opacity:.6}
.nowrap{white-space:nowrap}
.dim{color:var(--grey-dk)}

/* nové triedy namiesto bývalých inline štýlov v šablónach — potrebujú
   vlastnú triedu, aby ich vedela preprogramovať responzívna vrstva nižšie */
.sec-note{max-width:34ch;padding-bottom:10px}
.sec-note p{font-size:15px}
.cap-row{display:flex;justify-content:space-between;align-items:center;gap:32px}

/* Hlboký presah pre zábery s parallaxom vo veľkom obrázku a v citáte.
   Zapisuje sa cez .media, aby prebil inset:0 z .bigimg / .quote-bg. */
.media.para-deep{position:absolute;inset:-22% 0}

/* ── 19  RESPONZÍVNA VRSTVA ─────────────────────────────────────────────
   Základ je desktop-first (pozri hlavičku súboru); táto vrstva ho pre
   menšie plochy prerába, nielen zmenšuje. Dva hlavné zlomy — 1024px
   (tablet / menší notebook) a 640px (telefón) — plus pár doladení pod
   400px pre najužšie displeje.
   ────────────────────────────────────────────────────────────────────── */

/* dotyk namiesto myši — bez :hover nemá zmysel stmievať súrodencov ani
   nechávať modrastý „flash“ pri tapnutí */
a,button{-webkit-tap-highlight-color:transparent}
.hgal{touch-action:pan-y}
@media (hover:none){
  .svc-list:hover .svc-row{opacity:1}
  .svc-list .svc-row:hover{padding-left:0}
}

@media (max-width:1024px){

  :root{--gap:24px}

  /* 12-stĺpcová mriežka sa nižšie ako na desktope neoplatí lámať na
     nerovné časti — všetko padne pod seba v pôvodnom poradí */
  .grid{grid-template-columns:1fr;gap:28px}
  .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c10,.c11,.c12{grid-column:1/-1}
  .start2,.start3,.start4,.start5,.start6,.start7{grid-column-start:1}

  .sec-head{flex-direction:column;align-items:flex-start;gap:22px}
  .sec-head-txt{max-width:100%}
  .sec-note{max-width:100%}

  /* burger ostáva jediný spôsob navigácie na každej šírke; mega-stĺpec
     s činnosťami a bočný panel s obrázkom sa od tabletu nadol vynechávajú,
     nech panel otvára okamžite prehľadných šesť odkazov na dotyk */
  .nav-panel{overflow-y:auto;max-height:100vh;max-height:100svh}
  .nav-panel-in{grid-template-columns:1fr;gap:0;padding:44px var(--pad) 52px}
  .mega-col,.mega-aside{display:none}

  .split,.split-7-5,.split-5-7{grid-template-columns:1fr;gap:56px}
  .sticky-col{position:static;top:auto}

  .stats{grid-template-columns:repeat(2,1fr)}
  .stat{border-right:0;border-bottom:1px solid var(--line);padding:34px 0 32px}
  .stat:nth-last-child(-n+2){border-bottom:0}

  .values{grid-template-columns:repeat(2,1fr)}
  .value{border-right:0;border-bottom:1px solid var(--line);padding:36px 24px 38px}
  .value:nth-last-child(-n+2){border-bottom:0}
  .value:nth-child(2n+1){padding-left:0}
  .value:nth-child(2n){padding-right:0}

  /* Priebeh spolupráce. Vodorovná lišta s postupom dáva zmysel len nad
     päticou krokov vedľa seba — keď kroky padnú pod seba, meria už niečo
     iné, než čo čitateľ vidí. Aj s bodkami na začiatku krokov preto na
     menších plochách celý indikátor vypadáva. */
  .proc-line,.proc-step::before{display:none}
  .proc-grid{grid-template-columns:1fr}
  .proc-step{border-right:0;border-bottom:1px solid var(--line);padding:34px 0 30px}
  .proc-step:last-child{border-bottom:0;padding-bottom:0}

  .pd-facts{grid-template-columns:repeat(2,1fr)}
  .pd-fact{border-right:0;border-bottom:1px solid var(--line);padding:28px 0}
  .pd-fact:nth-last-child(-n+2){border-bottom:0}
  .pd-fact:nth-child(2n+1){padding-left:0}
  .pd-fact:nth-child(2n){padding-right:0}

  .cblocks{grid-template-columns:1fr}
  .cblock{border-right:0;border-bottom:1px solid var(--line);padding:32px 0}
  .cblock:last-child{border-bottom:0;padding-bottom:0}

  .svc-cards{grid-template-columns:repeat(2,1fr)}

  .pgrid{grid-template-columns:1fr;row-gap:52px}
  .pcard,.pcard.wide,.pcard.tall,.pcard.narrow{grid-column:1/-1}

  .team{grid-template-columns:repeat(2,1fr)}

  .job-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding:28px 0}
  .job-head h3{flex:1 1 100%}
  .job-tog{margin-left:auto}
  .job-body-in{grid-template-columns:1fr;gap:8px}

  .form{grid-template-columns:1fr}
  .field.full,.form-foot{grid-column:1/-1}

  .foot-grid{grid-template-columns:1fr 1fr;gap:44px 32px}

  /* Postup realizácie — číslo sa presunie nad nadpis, oba držia spoločný
     ľavý stĺpec zarovnaný doľava, popis stojí oproti nim vpravo. Pevný
     80 px stĺpec na číslo tu už len ukrajoval z nadpisu. */
  .step{grid-template-columns:1fr 1.25fr;gap:8px 26px;padding:26px 0}
  /* odsadenie zarovná účiaru čísla s prvým riadkom popisu vpravo */
  .step-n{grid-area:1/1;padding-top:4px}
  .step h4{grid-area:2/1}
  .step p{grid-area:1/2/3/3}

  /* Šípky galérie sedia na desktope oproti nadpisu; keď sa .sec-head zlomí
     do stĺpca, spadnú pod text a duplikujú to, čo prst spraví ťahom. */
  .hgal-nav{display:none}

  .svc-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px 18px;padding:28px 0}
  .svc-idx{order:1;padding-top:2px}
  .svc-go{order:2;margin-left:auto;width:38px;height:38px}
  .svc-row > span:nth-child(2){order:3;flex:1 1 100%}
  .svc-desc{order:4;flex:1 1 100%;max-width:100%}

  .cta-row{flex-direction:column;align-items:flex-start;gap:36px}
  .cta-contacts{flex-wrap:wrap;gap:28px 40px}

  .faq-a p{padding:0 8% 30px 0}

  .quote-mark{font-size:90px;margin-bottom:26px}

  .ticker-grp span{font-size:22px;padding:0 20px}

  .hero{min-height:600px}
}

@media (max-width:640px){

  :root{--gap:20px}

  /* d1–d3, citát a CTA majú plynulý clamp() vyladený od ~760px vyššie —
     pod tým už len zamŕzali na spodnej hranici; tu majú vlastný,
     pokračujúci rozsah smerom k najmenším telefónom */
  .d1{font-size:clamp(38px,11vw,58px)}
  .d2{font-size:clamp(32px,9vw,46px)}
  .d3{font-size:clamp(26px,7vw,32px)}
  .quote-txt{font-size:clamp(24px,7vw,32px)}
  .cta-h{font-size:clamp(34px,10vw,46px)}
  .lead{font-size:18px}

  .sec-head{gap:18px}
  .pri-link{padding:20px 4px}

  /* Vodiaca linka pred popiskom nad nadpisom zaberá aj s medzerou 48 px —
     na úzkej ploche odtláča krátky text priveľmi doprava a rozbíja ľavú os
     stránky. Na telefóne preto vypadáva vo všetkých sekciách, nielen
     v hlavičkách; popisky tak sadnú na spoločnú ľavú hranu s nadpismi. */
  .eyebrow::before{display:none}

  /* rovnaká úvaha pri podpise v citáte — dlhá linka pred menom si na úzkej
     ploche berie priveľa riadku */
  .quote-by{gap:13px}
  .quote-by .qline{width:24px}

  .hero{height:100vh;height:100svh;min-height:0}
  .hero-side{display:none}
  .hero-sub{font-size:16.5px}
  .hero-cta{flex-wrap:wrap;gap:18px 26px}

  .phero{padding-top:150px}

  .quote{padding:80px 0}
  .quote-mark{font-size:56px;margin-bottom:18px}

  .ticker-grp span{font-size:17px;padding:0 14px}

  .stats{grid-template-columns:1fr}
  .stat{padding:26px 0}
  .stat:not(:last-child){border-bottom:1px solid var(--line)}
  .stat:last-child{padding-bottom:0}

  .values{grid-template-columns:1fr}
  .value{padding:30px 0}
  .value:not(:last-child){border-bottom:1px solid var(--line)}
  .value:last-child{padding-bottom:0}

  .pd-facts{grid-template-columns:1fr}
  .pd-fact{padding:24px 0}
  .pd-fact:not(:last-child){border-bottom:1px solid var(--line)}
  .pd-fact:last-child{padding-bottom:0}

  .svc-cards{grid-template-columns:1fr}
  .team{grid-template-columns:1fr;row-gap:40px}
  .two-img{grid-template-columns:1fr}

  .pnav{grid-template-columns:1fr}
  .pnav a:first-child{border-right:0;border-bottom:1px solid var(--line);padding:30px 0}
  .pnav a:last-child{text-align:left;padding:30px 0}
  .pnav a:first-child:hover{padding-left:0}
  .pnav a:last-child:hover{padding-right:0;padding-left:7px}

  .foot-grid{grid-template-columns:1fr;gap:40px}
  .foot-bar{flex-direction:column;align-items:flex-start;gap:12px}
  /* pod sebou ide najprv podpis autora, copyright uzatvára stránku */
  .foot-bar .fb-r{order:-1}

  /* kontakty vo výzve pod seba — tri položky vedľa seba sa na tejto šírke
     aj tak zalamovali na dva nerovnaké riadky */
  .cta-contacts{flex-direction:column;gap:22px}

  .form-foot{flex-direction:column;align-items:stretch;gap:24px}
  .form-foot .btn{justify-content:center}

  .map{aspect-ratio:4/3}

  .hgal-item{width:82vw;max-width:400px}
  .hgal-track{gap:18px}

  /* popisok galérie a odkaz na všetky referencie sa vedľa seba na tejto
     šírke lámu na nerovné riadky — pod sebou obe držia ľavú os sekcie */
  .cap-row{flex-direction:column;align-items:flex-start;gap:18px}

  /* Dosadnutie záberu z priblíženia znamená takmer dve sekundy plynulého
     preškaľovania veľkej fotky, na ktorej ešte visí grayscale filter aj
     duotónový blend — na telefóne to trhá a počas doťahovania obrázka
     to vyzerá ako preblikávanie. Odkrytie maskou ostáva, priblíženie nie. */
  [data-rev="mask"] .media img,[data-rev="mask-up"] .media img{
    transform:scale(1);
    transition:filter 1.2s var(--e-soft);
  }

  .spec,.pd-meta .m,.manifest-side .k,.crumbs{flex-wrap:wrap;row-gap:4px}
}

@media (max-width:400px){
  .d1{font-size:clamp(34px,11vw,58px)}
  .stat b{font-size:44px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rev]{opacity:1!important;transform:none!important;clip-path:none!important}
  [data-rev="words"] .w i{transform:none!important}
  [data-stagger] > *{opacity:1!important;transform:none!important}
}